Counting characters

6 posts, 1 answers
  1. Marco
    Marco avatar
    37 posts
    Member since:
    Jul 2007

    Posted 18 Dec 2008 Link to this post

    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

  2. Steve Herold
    Steve Herold avatar
    22 posts
    Member since:
    Oct 2004

    Posted 22 Dec 2008 Link to this post

    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. 



  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 22 Dec 2008 Link to this post

    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.
  5. Marco
    Marco avatar
    37 posts
    Member since:
    Jul 2007

    Posted 22 Dec 2008 Link to this post

    Hello Dimo,

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

    Best regards,

    Marco
  6. Chris
    Chris avatar
    58 posts
    Member since:
    Jun 2012

    Posted 04 May 2012 Link to this post

    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>

  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 04 May 2012 Link to this post

    Thanks for sharing, Chris.

    Greetings,
    Dimo
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017