Character Limit in RadEditor

7 posts, 0 answers
  1. Velkumar
    Velkumar avatar
    85 posts
    Member since:
    Apr 2011

    Posted 13 Jan 2012 Link to this post

    Hi,
            I have a RadEditor in my page. I want to limit the maximum number of characters entered. I need not to dispaly the message if the maximum character is reached. But i need to  block the characters entered by the user if it reached the maximum length. Please give the solution for this problem.

    Thanks,
    Velkumar
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Jan 2012 Link to this post

    Hello,

    The following forum thread discussed the same.
    Charector limit in Rad:Editor

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Velkumar
    Velkumar avatar
    85 posts
    Member since:
    Apr 2011

    Posted 13 Jan 2012 Link to this post

    Hi,

    I got the following code

    function isAlphaNumericKey(keyCode) {
            if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91)) {
                return true;
            }
            return false;
        }

        function LimitCharacters(editor) {
            editor.attachEventHandler("onkeydown", function (e) {
                e = (e == null) ? window.event : e;
                if (isAlphaNumericKey(e.keyCode)) {
                    textLength = editor.get_text().length;
                    if (textLength >= maxTextLength) {
                       
                        e.returnValue = false;dd
                        return false;
                    }
                }
            });
            editor.attachEventHandler("onpaste", function (e) {
                var textLength = CalculateLength(editor);
                if (textLength >= maxTextLength) {
                    alert(messageText);
                    e.returnValue = false;
                    e.cancelBubble = true;
                    return false;
                }
            });
        }


    But it  doesn't work in Firefox
    function isAlphaNumericKey(keyCode) {
            if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91)) {
                return true;
            }
            return false;
        }
     
        function LimitCharacters(editor) {
            editor.attachEventHandler("onkeydown", function (e) {
                e = (e == null) ? window.event : e;
                if (isAlphaNumericKey(e.keyCode)) {
                    textLength = editor.get_text().length;
                    if (textLength >= maxTextLength) {
                        
                        e.returnValue = false;dd
                        return false;
                    }
                }
            });
            editor.attachEventHandler("onpaste", function (e) {
                var textLength = CalculateLength(editor);
                if (textLength >= maxTextLength) {
                    alert(messageText);
                    e.returnValue = false;
                    e.cancelBubble = true;
                    return false;
                }
            });
        }
  5. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 13 Jan 2012 Link to this post

    Hi,

    Which version of Firefox do you use? The onpaste event is supported by Firefox 4 and above. You should not experience problems with the onkeydown event.

    Make sure that you are using the latest version of RadControls for ASP.NET AJAX too. This code will not work for RadEditor Classic (RadEditor.Net2.dll).

    Greetings,
    Rumen
    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
  6. Velkumar
    Velkumar avatar
    85 posts
    Member since:
    Apr 2011

    Posted 13 Jan 2012 Link to this post

    Hi,

    I am using Firefox 8.0 and telerik version 2010.

    Thanks,
    Velkumar.
  7. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 18 Jan 2012 Link to this post

    Hello,

    I tested the OnClientPasteHtml event and the onpaste events in Firefox 9 and verified that both events are fired in this browser.

    <script type="text/javascript">
        var maxTextLength = 30;
        var messageText = 'You are not able to type more than ' + maxTextLength + ' symbols!';
     
        function isAlphaNumericKey(keyCode) {
            if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91)) {
                return true;
            }
            return false;
        }
     
        function LimitCharacters(editor) {
            editor.attachEventHandler("keydown", function (e) {
                e = (e == null) ? window.event : e;
                if (isAlphaNumericKey(e.keyCode)) {
                    textLength = editor.get_text().length;
                    if (textLength >= maxTextLength) {
                        alert(messageText);
                        e.returnValue = false;
                        return false;
                    }
                }
            });
        }
     
        function CalculateLength(editor, value) {
            var textLength = editor.get_text().length;
            var clipboardLength = value.length;
            textLength += clipboardLength;
            return textLength;
        }
     
        function OnClientPasteHtml(editor, args) {
            var commandName = args.get_commandName();
            var value = args.get_value();
     
            if (commandName == "PasteFromWord"
                || commandName == "PasteFromWordNoFontsNoSizes"
                || commandName == "PastePlainText"
                || commandName == "PasteAsHtml"
                || commandName == "Paste") {
                var textLength = CalculateLength(editor, value);
                if (textLength >= maxTextLength) {
                    alert("You are not allowed to enter more that 30 symbols");
                    args.set_cancel(true);
     
                }
            }
        
    </script> 
    <telerik:RadEditor id="RadEditor1" OnClientPasteHtml="OnClientPasteHtml" OnClientLoad="LimitCharacters" 
        Runat="server"
        <Content></Content> 
    </telerik:RadEditor>

    and

    <span id="counter" style="border: 1px solid red;text-align: right;">Characters left:</span>
    <telerik:RadEditor ID="RadEditor" StripFormattingOptions="nonesupresscleanmessage" 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();         //returns a reference to the textarea in Html mode                           
     
            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>

    My suggestion is to install the latest version of Telerik.Web.UI.dll and test again. It is Q3 2011 SP1 (2011.3.1305).

    Best regards,
    Rumen
    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
  8. Greg
    Greg avatar
    13 posts
    Member since:
    Sep 2005

    Posted 01 Oct 2014 in reply to Rumen Link to this post

    I can't figure out any onkeydown cancel function that works with FireFox 30+.  Works great and cancels with IE, but not FF.  We implemented 3 different cancel functions and none work to cancel onkeydown.

                    $telerik.cancelRawEvent(e);
                    e.returnValue = false;  
                    return false;

    Any suggestions?

        function EditorCheckCountHandler(e, id) {
            //Get TextArea and Properties
            e = (e == null) ? window.event : e;
            if (isAlphaNumericKey(e.keyCode)) {
                var editor = $find(id);
                if (!EditorCheckCount(editor)) {
                    $telerik.cancelRawEvent(e);
                    e.returnValue = false;  
                    return false;
                }
            }
        }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017