Character Limit in RadEditor

[Velkumar]

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

[Princy]

Hello,

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

Thanks,
Princy.

[Velkumar]

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;
            }
        });
    }

[Rumen]

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

[Velkumar]

Hi,

I am using Firefox 8.0 and telerik version 2010.

Thanks,
Velkumar.

[Rumen]

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

[Greg]

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;
            }
        }
    }