Question

My asp .net web application requires a telerik:RadTextBox that can accept 160 characters max. Every time a character is entered into this textbox, I want the number of remaining characters that i can type to be displayed near this textbox as a label.Can anyone tell me which event should i make use of and provide javascript code to implement this?

Answer 1

I have done something similar to this with a series of user controls that have text boxes in them. I would recommend using the onkey up and onkey down events to increase/lower your counter.

This is the javascript that we use.

<script type="text/javascript" language="Javascript">
    //Character count script!
    function textCounter(field, countfield, maxlimit) {
        if (countfield == null) { return; }

        if (field.value.length > maxlimit)
            field.value = field.value.substring(0, maxlimit) + " Characters Remaining";
        else
            countfield.value = maxlimit - field.value.length + " Characters Remaining";
    }
</script>

Here is something similar to the text box with the counter field below it.

   <telerik:RadTextBox ID="txtTextBox" runat="server"  />
    <input readonly="readonly" enableviewstate ="false" type="text" runat="server" id="charCount" size="25" name="charCount" tabindex="-1" value="" 
        style="border: solid 0px white; display:none; background: white; font-size: 11px; color: #FF0000; text-align: right; float:right" />

The attributes are added onLoad if there is a maxlength for the textbox.

        txtTextBox.Attributes.Item("onblur") = charCount.ClientID + ".style.display='none';"
        txtTextBox.Attributes.Item("onfocus") = charCount.ClientID + ".style.display='block';"
        txtTextBox.Attributes.Item("onkeyup") = "textCounter(this, " + charCount.ClientID + "," + myMaxLength.ToString + ");"
        txtTextBox.Attributes.Item("onkeydown") = "textCounter(this, " + charCount.ClientID + "," + myMaxLength.ToString + ");"

When all this is combined it will shoe up the counter if you have set a max limit on it, only when that text box has focus. Once the focus is gone the script onblur hides the text box again. The counter is fired on the onkeyup and onkeydown so the count will stay accurate. It will count backwards to 0 and once it reaches 0 the user will not be able to enter more text.