textbox character counting on keypress using javascript in asp.net

Number of characters in TextBox control

 
The JavaScript used to limit the number of characters in a TextBox control. This client-side script utilized
document.getElementById method and the control ID for HTML markup that was generated by ASP.NET. The problem with this script was that it did not work correctly with multiple TextBox controls on the web page and not cross-browser compatible. So I decided to rewrite it to ease the mentioned problems. Shown in Listing 1 is the new content of the JavaScript. There are two functions resided in it namely validateLimit and get_object. The former function accepts three parameters.

1. TextBox object
2. HTML Div id (to hold the text)
3. Maximum number of characters the TextBox control can hold

The purpose of the later function is to ensure that modern and older browsers are able to access the form elements.

Listing 1
function validateLimit(obj, divID, maxchar) {

    objDiv = get_object(divID);

    if (this.id) obj = this;

    var remaningChar = maxchar - trimEnter(obj.value).length;

    if (objDiv.id) {
        objDiv.innerHTML = remaningChar + " characters left";
    }
    if (remaningChar <= 0) {
        obj.value = obj.value.substring(maxchar, 0);
        if (objDiv.id) {
            objDiv.innerHTML = "0 characters left";
        }
        return false;
    }
    else
    { return true; }
}

function get_object(id) {
    var object = null;
    if (document.layers) {
        object = document.layers[id];
    } else if (document.all) {
        object = document.all[id];
    } else if (document.getElementById) {
        object = document.getElementById(id);
    }
    return object;
}
//http://lawrence.ecorp.net/inet/samples/regexp-format.php#convert
function trimEnter(dataStr) {
    return dataStr.replace(/(\r\n|\r|\n)/g, "");
}

Putting everything together.

Listing 2


   
    

   

    

   

240 characters left

                        Width="600px" ToolTip="Summary:(240 characters)"
                    onkeyup="return validateLimit(this, 'lblMsg1', 240)">
                    ControlToValidate="TextBox1" Display="Dynamic"
            SetFocusOnError="True">*
   



   

300 characters left

                        Width="600px" ToolTip="Summary:(300 characters)"
                    onkeyup="return validateLimit(this, 'lblMsg2', 300)">
                    ControlToValidate="TextBox2" Display="Dynamic"
            SetFocusOnError="True">*
   


   
   

   

   

Here is the output:

Figure 1