This is a migrated thread and some comments may be shown as answers.

Counting characters

8 Answers 437 Views
Input
This is a migrated thread and some comments may be shown as answers.
Marco
Top achievements
Rank 1
Marco asked on 18 Dec 2008, 05:28 PM
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

8 Answers, 1 is accepted

Sort by
0
Steve Herold
Top achievements
Rank 1
answered on 22 Dec 2008, 09:33 AM
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. 



0
Accepted
Dimo
Telerik team
answered on 22 Dec 2008, 04:07 PM
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.
0
Marco
Top achievements
Rank 1
answered on 22 Dec 2008, 06:05 PM
Hello Dimo,

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

Best regards,

Marco
0
Chris
Top achievements
Rank 2
answered on 04 May 2012, 11:16 AM
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>

0
Dimo
Telerik team
answered on 04 May 2012, 11:34 AM
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.
0
Epic
Top achievements
Rank 1
answered on 09 Dec 2016, 04:30 AM
you're my hero Chris thanks !
0
maurizio brusini
Top achievements
Rank 1
answered on 31 Jan 2019, 08:45 AM

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

0
Eyup
Telerik team
answered on 04 Feb 2019, 07:19 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Input
Asked by
Marco
Top achievements
Rank 1
Answers by
Steve Herold
Top achievements
Rank 1
Dimo
Telerik team
Marco
Top achievements
Rank 1
Chris
Top achievements
Rank 2
Epic
Top achievements
Rank 1
maurizio brusini
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or