CODEWITHSUNDEEP
asp.netweb-applicationstextboxtelerik
Mridul Raj
Mridul Raj

Reputation: 999

Display number characters left to reach maxlength of a telerik:RadTextBox

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?

Upvotes: 0

Views: 6077

Answers (3)

Cruril
Cruril

Reputation: 450

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.

Upvotes: 1

Kapil Khandelwal
Kapil Khandelwal

Reputation: 16144

Use the onFocus client side event:

Eg.

textBox1.Attributes.Add("onFocus", "Counter('textBox1','LabelID',160)");

<script>
function Counter(textboxID, LabelID, MaxCharacters) {
  var count = MaxCharacters - document.getElementById(textboxID).value.length;
    document.getElementById(LabelID).innerHTML = count; 
}
</script>

Upvotes: 0

Jigar Pandya
Jigar Pandya

Reputation: 5977

here are some hints on your questions:

In order to count the number of characters and exclude line breaks, you can use the following:

<telerik:RadTextBox ID="RTB1" runat="server" TextMode="MultiLine" ClientEvents-OnKeyPress="KeyPress" />

<script type="text/javascript">

function KeyPress(sender, args)
{
    var text;
    if ($telerik.isIE || args.get_domEvent().rawEvent.keyCode == 0 || args.get_domEvent().rawEvent.keyCode == 13) // 13 : Enter key
    {
        text = escape(sender.get_value() + args.get_keyCharacter());
    }
    else
    {
        text = escape(sender.get_value());
    }

    while (text.indexOf("%0D%0A") != -1)  // IE
    {
        text = text.replace("%0D%0A", " ");
    }
    while (text.indexOf("%0A") != -1)
    {
        text = text.replace("%0A", " ");
    }
    while (text.indexOf("%0D") != -1)
    {
        text = text.replace("%0D", " ");
    }

    var calculatedLength = unescape(text).length;

    if (args.get_domEvent().rawEvent.keyCode == 8 && calculatedLength > 0) // 8 : backspace
    {
        calculatedLength -= 1;
    }

    document.title = calculatedLength;
}

</script>

This way you can do this.

Even you can check http://www.telerik.com/community/forums/aspnet-ajax/input/counting-characters.aspx for more details.

Thanks,

Upvotes: 0

Related Questions