locked
Javascript Characters Counter/Remaining RRS feed

  • 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

     

     

    Sunday, July 18, 2010 9:02 AM

All replies

  • 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



    Sunday, July 18, 2010 9:56 AM
  • User218554976 posted

    Hi,

     

    As I said I want the solution for radEditor

     

    Br. 

    Sunday, July 18, 2010 10:21 AM
  • 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

    Sunday, July 18, 2010 12:07 PM
  • 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

    Sunday, July 18, 2010 12:07 PM
  • 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

     

     

    Sunday, July 18, 2010 1:30 PM
  • 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>


    Monday, July 19, 2010 12:39 AM
  • 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. <% ... %>).

    Monday, July 19, 2010 2:48 AM
  • User1218929252 posted


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

    Monday, July 19, 2010 3:23 AM
  • 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!? 

    Monday, July 19, 2010 3:47 AM
  • 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

    Tuesday, July 20, 2010 3:37 PM