Counting characters

[Marco]

Hello,

I have 2 questions concerning the character count with a RadtextBox.

I need the character count of a multiline RadtextBox on client side dynamic when typing a text.
So i wrote a little function for this to get the  get_textBoxValue() length value, that is called by the onKeyPress event.

This works ok, except 2 things that i can't figure out.
1: The character count is also counting the line breaks, as a character, but the MaxLength of the RadTextBox doesn't.
Is there a way to not include the linebreaks with the length of the text?

2: The Backspace or Delete key, when used for deleting some text, is not firing any event at client side.
is there a way to get this keys or action, anywhere in a client side event?

thanks,

Marco

[Steve Herold]

Marco,

I struggled looking for a way to count characters this past weekend and found a nice little control at  http://www.fluentconsulting.com/components/Fluent.MultiLineTextBoxValidator/

I noticed that it does count the carriage returns, but it is something I can live with.  Counter handles deletions. 

[Dimo]

Hi Marco,

First of all, your forum post made me examine the RadInput Javascript code and find some issues with the logic, related to new line counting, which are now fixed, so thank you very much :) Actually, RadTextBox should take into consideration the number of new lines when deciding whether MaxLength has been reached.

I have updated your Telerik points for bringing the issue to our attention.


Now, 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>


The above Javascript code will not work correctly in Internet Explorer, because this browser behaves differently, when it comes to pressing of non-alphanumeric keys (as you have already observed). You can't use KeyPress, however, you can use the keydown event. It is not exposed in the control's API, but you can still subscribe to it like this:

<telerik:RadTextBox ID="RTB1" runat="server" TextMode="MultiLine" onkeydown="KeyDown(event)" />

<script type="text/javascript">

function KeyDown(e)
{
    // e.keyCode == 8 : backspace
    // e.keyCode == 46 : delete
   
}

</script>


As a conclusion, you will have to use some combination of both methods in order to achieve some nice cross-browser solution (as always :) ).


Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Marco]

Hello Dimo,

Thank you for the information (and points).
I will take your hints, and think that are good solutions.

Best regards,

Marco

[Chris]

Hi,
        I appreciate that this is quite an old thread but I thought I would just update based on my current experience whilst implementing the solution given. I am using the Q1 2012 .NET 4.0 controls and the delete issue that you point out in relation to IE does in fact affect a few other browsers.

The KeyPress() function works in Fire Fox 9.01 and  Opera 10.63 but does NOT work in IE9, Chrome 18.0.1025.168 and Safari 5.03.

Below is my work around, I haven't modified your KeyPress function and you may well be able to update that to work with a wider range of browsers. I implemented the KeyDown function along the lines recommended. Please see below for my sample code.

Thanks

Chris

<script type="text/javascript">

     function KeyDown(sender,e) {
         // e.keyCode == 8 : backspace
         // e.keyCode == 46 : delete
         //used for detection of delete and backspace and in IE only
         if (($telerik.isIE || $telerik.isChrome || $telerik.isSafari) && (e.keyCode == 8 || e.keyCode == 46)) {
             var text;

             text = escape(sender.value);
             var calculatedLength = unescape(text).length;
             var lbl = document.getElementById('lblCount');
             lbl.innerHTML = calculatedLength - 1 < 0 ? 0 : calculatedLength - 1;
         }
     }

     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;
         }

         var lbl = document.getElementById('lblCount');
         lbl.innerHTML = calculatedLength;
     }

</script>

<div id="comment_entry" style="clear: both;">
    <div id="comment_wrapper">
        Comment:<br />
        <div id="commentbox" style="float: left;">
            <telerik:RadTextBox ID="txtComment" runat="server" MaxLength="250" Rows="4" Columns="70"
                                TextMode="Multiline" Width="490px" ClientEvents-OnKeyPress="KeyPress"
                                onkeydown="KeyDown(this,event)" >
            </telerik:RadTextBox>
        </div>
        <div id="commentstats" style="float: left; margin-left: 10px;">
            Count: <label id="lblCount"></label><br />
            Limit: 250</div>
        <div id="savebutton" style="float: left; margin-left: 30px;">
            <telerik:RadSpell ID="RadSpell1" runat="server" ButtonType="ImageButton"
                              ControlToCheck="txtComment" DictionaryLanguage="en-GB"/>
            <asp:ImageButton ID="btnSave" runat="server" ImageUrl="~/Images/icons/002_07.png" />
        </div>
    </div>
</div>

[Dimo]

Thanks for sharing, Chris.

Greetings,
Dimo
the Telerik team

[Epic]

you're my hero Chris thanks !

[Ghezzo]

i have the same problem a RadTextBox (multiline) and i want in a LblCount show the missing character. BUT....

my RadTextBox is inside an EditTemplateColunm in a RadGrid and i really dont know how to write the Javascript or Jquery code.

I tried your example but do no work. Some of u can help me?

Thank

Maurizio

[Eyup]

Hi Maurizio,

I'm glad the solution provided in your support ticket has proven helpful.
Feel free to follow up if new questions arise.

Regards,
Eyup
Progress Telerik