Issue With Javascript function on firefox Not initiating a counter via jquery keyboard input(working on Chrome & IE)

Question

Scenario: text limited textArea, deploy javascript counter to count the chars remaining and inform user. Input is in the form of a jquery keyboard located on the child pages' masterpage. *

Problem: Chrome and IE detect the input from the masterpages jquery keyboard and input the chars to the textbox and trigger the javascript counter function so real time updates are given to the user, The Problem Is FireFox doesn't trigger this JavaScript counter from the jquery keyboard, the keyboard is updating the textArea but fails to initiate the javascript counter.

MyAttemps: I've done testing to figure out the problem only exists on firefox(i was originally using firefox) I've looked up and added extra attributes in an attempt to initate "theFunction"(see code), & i've tried RegisterClientScriptBlock instead of RegisterStartupScript ... WTF FF usually isn't the problem.

below is the javascript counter it updates a readonly label.

any ideas???

.aspx
                <asp:TextBox ID="txtBody" runat="server" Rows="8" TextMode="MultiLine" Width="98%"
                    meta:resourcekey="txtBodyResource1" CssClass="keyboardbox2" Height="150px"></asp:TextBox>

.aspx.cs

private void remainingLength()    // Initiated PageLoad
        {
            try
            {   
                // call service & retrieve the message body max size
                int maxlimit = fService.GetSmsMessageBodySize();
                if (maxlimit >= 0)
                {
                // javascript function to count and limit user input into the message body
                string Register = @"<script language=javascript>
                   function textCounter(field, countfield, maxlimit) 
                   {
                   if (field.value.length > maxlimit)
                        field.value = field.value.substring(0, maxlimit);
                   else
                        countfield.value = maxlimit - field.value.length;
                   }
                   </script>";

                // register the javascript into the page

                Page.ClientScript.RegisterStartupScript(this.GetType(),
                "ClientScriptFunction", Register);

                string theFunction = "javascript:textCounter(" + txtBody.ClientID + ",this.form.remLen," + maxlimit + ");";


                // Add attributes to initalize the counter & to help prevent the user from being able to circumnavigate the counter 
                txtBody.Attributes.Add("onKeydown", theFunction);
                txtBody.Attributes.Add("onKeyup", theFunction);
                txtBody.Attributes.Add("onKeypress", theFunction);

                txtBody.Attributes.Add("onPaste", theFunction);
                txtBody.Attributes.Add("onLoad", theFunction);
                txtBody.Attributes.Add("onClick", theFunction);
                txtBody.Attributes.Add("onMouseOver", theFunction);
                //txtBody.Attributes.Add("onDragDrop", theFunction);
                txtBody.Attributes.Add("onChange", theFunction);
                txtBody.Attributes.Add("onPropertychange", theFunction);
                //txtBody.Attributes.Add("onAfterupdate", theFunction);
                txtBody.Attributes.Add("onMouseOut", theFunction);
                txtBody.Attributes.Add("onMouseMove", theFunction);
                txtBody.Attributes.Add("onFocus", theFunction);
                txtBody.Attributes.Add("onFocusleave", theFunction);
                }
                else { throw new Exception("GetSmsMessageBodySize failed to return a vaild Message MaxSize"); }
            }
            catch (Exception excpt) 
            {
                throw new Exception("remainingLength() " + excpt);
            }
        }

FireFox Outputs this for the textArea it seems to function if i mouse over or key press just nothing from the jquery keyboard

 <textarea name="ctl00$ContentPlaceHolder1$txtBody" rows="8" cols="20" id="ctl00_ContentPlaceHolder1_txtBody" class="keyboardbox2" onPropertychange="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" onKeyup="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" onFocus="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" onPaste="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" onDragDrop="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" onMouseOver="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" onClick="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" onMouseOut="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" onKeypress="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" onKeyDown="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" onMouseMove="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" onLoad="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" onFocusleave="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" onChange="javascript:textCounter(ctl00_ContentPlaceHolder1_txtBody,this.form.remLen,143);" style="height:150px;width:98%;"></textarea>

Answer 1

You're passing in as the first argument the ID of the textfield, but then use it as an object. You should update the JS function to:

function textCounter(fieldId, countfield, maxlimit) 
{
    var field = $("#" + fieldId);

    if (field.value.length > maxlimit)
        field.value = field.value.substring(0, maxlimit);
    else
        countfield.value = maxlimit - field.value.length;
}

Additionally, since the first param is an ID (thus a string) the JS function for the events should be:

string theFunction = "javascript:textCounter('" + txtBody.ClientID + "',this.form.remLen," + maxlimit + ");";

As a suggestion, the function called for the events should also be registered as a global function and then just called from the generated HTML element to avoid duplicates and longer HTML. Additionally, the second param (the counter field) should also be sent as an ID and retrieved using jQuery for better compatibility.