Enforce character limit before submit

[AP]

The MaxTextLength property checks the limit on submit, but I need a way of stopping any characters being entered once the limit has been reached, I'm prepared to take the performance hit.

I can display an alert message once the limit is reached, but how can I stop any more text being entered?

NB: The users can only see the text entry view, the HTML view is hidden, and the character limit is for the text entered, not the html length.

The function I have so far is:-

<script type="text/javascript">
    function OnClientLoad(editor) {
        editor.attachEventHandler("onkeydown", function (e) {
            var content = editor.get_text(); //returns the editor's content as plain text
            var words = 0;
            if (content) {
                var punctRegX = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g;
                var contentcontent = content.replace(punctRegX, "");
                var trimRegX = /(^\s+)|(\s+$)/g;
                contentcontent = content.replace(trimRegX, "");
                if (content) {
                    splitRegX = /\s+/;
                    var array = content.split(splitRegX);
                    words = array.length;
                }
            }
            var counter = $get("counter");

            var limit =<%  Response.Write(charimit.ToString());%>
            counter.innerHTML = "Words: " + words + " Characters: " + content.length;
            if(content.length > limit)
            {
                alert("Too many characters!");

            }

        });
    }

</script>

Ideally, after the alert has popped up, the character that had just been entered would be deleted, or at least future entry would be prevented (although any deletions would have to be allowed).

Thanks

[Rumen]

Hi AP,

You can stop the key event using the $telerik.cancelRawEvent(e); method, e.g.

if (content.length > limit - 1) {
    alert("Too many characters!");
    $telerik.cancelRawEvent(e);
}

Of course you should exclude the Delete and BackSpace keys from this check.

You can cgeck the isAlphaNumericKey function available in the following article: http://www.telerik.com/help/aspnet/editor/includingsymbolcounterandlimitthetextlength.html

Note that parts of the code applies to RadEditor Classic only.

Regards,
Rumen
the Telerik team

[AP]

Thanks, that's great.

I've the code is now:-

   function OnClientLoad(editor) {
       editor.attachEventHandler("onkeydown", function (e) {
           var content = editor.get_text(); //returns the editor's content as plain text
           var words = 0;
           if (content) {
               var punctRegX = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g;
               var contentcontent = content.replace(punctRegX, "");
               var trimRegX = /(^\s+)|(\s+$)/g;
               contentcontent = content.replace(trimRegX, "");
               if (content) {
                   splitRegX = /\s+/;
                   var array = content.split(splitRegX);
                   words = array.length;
               }
           }
           var counter = $get("counter");

           var limit =<%  Response.Write(wordLimit.ToString());%>
           var threshold=<%  Response.Write(warningThreshold.ToString());%>
           counter.innerHTML = "Words: " + words + " Characters: " + content.length;
           if(content.length > limit)
           {

               if (isAlphaNumericKey(e.keyCode))
        {
           alert("Too many characters!");
           $telerik.cancelRawEvent(e);
        }



           }
           if(content.length > threshold)
           {
               warning.innerHTML="WARNING: You are approaching the character limit for this section!";
           }
           else
           {
               warning.innerHTML="";
           }
       });
   }
    function isAlphaNumericKey(keyCode)
{
     if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91))
     {
         return true;
     }
     return false;
}

And works fine.