Javascript Characters Counter/Remaining

Question

User218554976 posted

Hello,

 

I want to show the remaing characters in RadEditor.

I have set the limitation for the radEditor but don't know how I can get the remaining Characters.

I know how to do it for textBox but telerik:radEditor does not supprt the onKeyUp and Down.

I could not find any samples on net!Can anyone help me please.  

 

Thanks

 

 

Answer 1

User1218929252 posted

try with this...

<script type="text/javascript">

function textCounter(field, countfield, maxlimit)
{
if (field.value.length > maxlimit)
   field.value = field.value.substring(0, maxlimit);
else
   countfield.value = maxlimit - field.value.length;
}
</script>
<h4>Count This Text</h4>
      
        <asp:TextBox ID="txtToCount" TextMode="MultiLine"
                runat="server" onkeyup='textCounter(this, this.form.remLen, 160);'
                onkeydown="textCounter(this, this.form.remLen, 160);" />
        <br />
        <input readonly="readonly" type="text" name="remLen" size="3" maxlength="3" value="160" /> characters left

Answer 2

User218554976 posted

Hi,

 

As I said I want the solution for radEditor

 

Br. 

Answer 3

User1218929252 posted

check with this..

http://www.telerik.com/community/forums/aspnet-ajax/chart/charector-limit-in-rad-editor.aspx

Answer 4

User218554976 posted

thanks for the link,I had seen this before but  for some reasons it doesn't work for me! 

I have this function which shows the remaining characters in here 10 to 0 . at this point my problem is when it reachs to 0 it contines with -1,-2,...

can you help me to stop it when it reachs to 0 ??

 

function OnClientLoad(editor) {
            editor.attachEventHandler("onkeydown", function (e) {
                var content = editor.get_text(); 
                var maxLenght = 10;
                var counter = 0;
                var message = 'You are not able to type more than ' + maxLenght + ' characters!';

                if (content) {
                    var punctRegX = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g;
                    var contentcontent = content.replace(punctRegX, "");
                    var trimRegX = /(^\s+)|(\s+$)/g;
                    contentcontent = content.replace(trimRegX, "");
                }


                var counter = $get("counter");
                counter.innerHTML = "Characters left: " + (maxLenght - content.length);

            });
        }

Thanks

Answer 5

User218554976 posted

thanks for the link,I had seen this before but  for some reasons it doesn't work for me! 

I have this function which shows the remaining characters in here 10 to 0 . at this point my problem is when it reachs to 0 it contines with -1,-2,...

can you help me to stop it when it reachs to 0 ??

 

function OnClientLoad(editor) {
            editor.attachEventHandler("onkeydown", function (e) {
                var content = editor.get_text(); 
                var maxLenght = 10;
                var counter = 0;
                var message = 'You are not able to type more than ' + maxLenght + ' characters!';

                if (content) {
                    var punctRegX = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g;
                    var contentcontent = content.replace(punctRegX, "");
                    var trimRegX = /(^\s+)|(\s+$)/g;
                    contentcontent = content.replace(trimRegX, "");
                }


                var counter = $get("counter");
                counter.innerHTML = "Characters left: " + (maxLenght - content.length);

            });
        }

Thanks

Answer 6

User218554976 posted

I have another question.

how to  send an alert when it is the max characters

in this point is 10 which means when the remaing characters are 0 it should send the alert.

 

 

Thanks again

 

 

Answer 7

User1218929252 posted

did u make a try with this script from the above said link..it has both counter and alert..

<span id="counter" style="border: 1px solid red;text-align: right;">Characters left:</span>
<telerik:RadEditor ID="RadEditor" runat="server" OnClientLoad="OnClientLoad">
</telerik:RadEditor>

<script type="text/javascript">
var limitNum = 250;
var message = 'You are not able to type more than ' + limitNum + ' characters!';
var counter = $get('counter');

function LimitLength(mode)
{                  
    var rtfEditor = $find("<%=RadEditor.ClientID %>");
    if (mode == 2){
     var oValue = rtfEditor.get_textArea().innerHTML.trim().length;
     }
    else{var oValue = rtfEditor.get_html(true).trim();}
 
    if (oValue.length >= limitNum)
    {
        rtfEditor.set_html(oValue.substring(0, limitNum - 1));
        alert(message);
    }  
    counter.innerHTML = "Characters left: " + ( limitNum - oValue.length );
}

function AttachHandlers(mode)
{
                  
    var rtfEditor = $find("<%=RadEditor.ClientID %>");
    if(mode==1)
    {        
        rtfEditor.attachEventHandler("onkeyup", LimitLength);
        rtfEditor.attachEventHandler("onpaste", LimitLength);
        rtfEditor.attachEventHandler("onblur", LimitLength);
    }
    else
    {                              
        var textarea = rtfEditor.get_textArea();                                      

        if(window.attachEvent)
        {                              
            textarea.attachEvent("onkeydown", LimitLength);
            textarea.attachEvent("onpaste", LimitLength);
            textarea.attachEvent("onblur", LimitLength);
        }                            
        else
        {                      
           textarea.addEventListener("keyup",LimitLength, true);
           textarea.addEventListener("paste", LimitLength, true);
           textarea.addEventListener("blur", LimitLength, true);
        }
    }
}

function OnClientLoad(editor, args)
{                  
    rtfEditor = editor;                      
    AttachHandlers(1);
    LimitLength(1);
                                                  
 
    editor.add_modeChange(function(sender, args)
    {      
       var mode = sender.get_mode();                   
       if (mode == 1 || mode == 2)
       {                                     
          AttachHandlers(mode);
          LimitLength(mode);
       }
  });
}
</script>

Answer 8

User218554976 posted

I ger error on this line

var rtfEditor = $find("<%=RadEditor.ClientID %>");   

Server Error in '/Forum' Application.
--------------------------------------------------------------------------------

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Answer 9

User1218929252 posted

Try removing the runat=server from the <head> tag in your document.

Answer 10

User218554976 posted

it works fine now!Thanks

but is there any way I can keep the runat=server ??? won't it create bug for other features of the application!? 

Answer 11

User1890873615 posted

If you are use RadAjaxManager or RadAjaxPanels, then you need to surround your "raw" code blocks with RadCodeBlocks:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
   <script language="javascript" type="text/javascript">
       //Your code here that contains <% %> blocks
       //(You can safely wrap code with or without <% %>)
   </script>
</telerik:RadCodeBlock>

This should solve your problems and allow you to reset runat="server" in your head tag. Details:

http://www.telerik.com/help/aspnet-ajax/ajxradscriptblockradcodeblock.html