Textarea maxlength attribute not working correctly across all browsers

Question

I want to restrict a textarea to 500 characters. For this I used a maxlength attribute but there is some compatability issue across different browsers. To resolve this I used a javascript function

function checkLength(fieldName,limit){

            if(fieldName.value.length >= limit){

                fieldName.value  = fieldName.value.substring(0,limit);
            }
        }

I am calling this function on two events onKeyDown and onKeyUp. This somewhat fixes my issue but when I copy and paste a string with length more than 500 chars it shows all the text and then trims to 500 on key up. Is there any way to show exactly 500 chars while copy pasting whithout flickering.

I tried with onPaste as per the solution in link given above "Max length of textarea is not working on IE8". IE doesn't recognize it. — Kunal, Oct 21 '13 at 07:10
If answers to an older question about the same problem are not satisfactory, you should try to have the answers improved there. We don’t want duplicate questions with varying sets of answers. — Jukka K. Korpela, Oct 21 '13 at 07:17
The `onpaste` attribute was invented by Microsoft and has been supported on IE since IE 5. So if it does not seem to work, the problem is elsewhere. — Jukka K. Korpela, Oct 21 '13 at 07:20

score 1 · Answer 1 · answered Oct 21 '13 at 07:37

1

If your willing to use jquery then here is solution which will solve your entire problem:

script:

$('textarea').on('paste keyup keydown', function (event) {
 var element = this;
  setTimeout(function () {
   if($(element).val().length > 500)
    {
     if(event.type=="paste"){
      $(element).val($(element).val().substr(0,500))    
     }else{
      $(element).val($(element).val().slice(0,-1));
     }
      alert("excceded more then 500 characters");
    }else{
     return true;
    }
 }, 100);
});

Check the demo here : http://jsfiddle.net/2Qxh9/

answered Oct 21 '13 at 07:37

Joke_Sense10

5,341
2
18
22

I am looking for a solution in javascript or extjs but not in jQuery – Kunal Oct 21 '13 at 07:39
Wait I will try and update it to javascript. – Joke_Sense10 Oct 21 '13 at 07:42

score 0 · Answer 2 · answered Oct 21 '13 at 08:35

you can try something like this:

            <script language="javascript" type="text/javascript">
            function limitText(limitField, limitCount, limitNum) {
                if (limitField.value.length > limitNum) {
                    limitField.value = limitField.value.substring(0, limitNum);
                    alert("your message exceeds the limit");
                } else {
                    limitCount.value = limitNum - limitField.value.length;
                }
            }
            </script>

            <form name="myform" action="">
                <textarea id="t1" name="description" onpropertychange="limitText(this.form.description,this.form.countdown,500);"  OnInput="limitText(this.form.description,this.form.countdown,500);" onKeyDown="limitText(this.form.description,this.form.countdown,500);" rows="20" cols="40">
                </textarea><br>
               <font size="1">(Maximum characters: 500)<br>
                You have <input readonly type="text" name="countdown" size="3" value="10"> characters left.</font>
            </form>

It does not resolve the copy paste issue when pasting more characters at a time than the limit. — Kunal, Oct 22 '13 at 10:55

Textarea maxlength attribute not working correctly across all browsers

2 Answers2