Max length of textarea is not working on IE8

Question

From research on internet, max length attribute is not working on IE 8 and 9

To resolve the problem I tried a solution from here , it use with the other function which is for presentation textarea:

//Dynamic append the textarea row
function do_resize(textArea) {
    while (
        textArea.rows > 1 &&
        textArea.scrollHeight < textArea.offsetHeight
    )
    {
        textArea.rows--;
    }
    while (textArea.scrollHeight > textArea.offsetHeight)
    {
        textArea.rows++;
    }
    textArea.rows++
}


<textarea name="q<%=countNo%>_ans" rows="3" cols="55" maxlength="2000" style="resize: none;" onkeyup="new do_resize(this);" onKeyPress="return ( this.value.length < 2000);"></textarea>

The problem is , The textarea is not able to input any character after it exceed the 2000 in IE8 9 , but I can still use the copy and paste function which will exceed the textarea limit. How to fix this? thanks

Answer 1

The code in the question effectively disables typing from keyboard when the limit has been reached. To impose the restriction on pasted content too, you need to handle other events, too. The following code truncates the textarea content to the given length. This is not good usability (you should probably signal an attempt to exceed the limit, instead of silent truncation, and you could have a character counter on the page to help the user), but it does what was asked for:

<textarea maxlength=2000
  onchange="testLength(this)"
  onkeyup="testLength(this)"
  onpaste="testLength(this)"
></textarea>
<script>
var maxLength = 2000;
function testLength(ta) {
  if(ta.value.length > maxLength) {
    ta.value = ta.value.substring(0, maxLength);
  }
}
</script>

Answer 2

Just for some hstory on this, maxlength on a textarea is a new HTML5 feature which was only first supported by IE in 10. IE 9 and below never supported it.

Answer 3

Use this code it will work for below IE 9 version. only change version in if condtion.

if(navigator.appVersion.indexOf("MSIE .9")!=-1)
                                {
                                    $('#inputid').bind('keyup blur', function () {
                                        var $this = $(this);
                                        var len = $this.val().length;
                                        var maxlength = 3;
                                        if (maxlength && len > maxlength) {
                                            var inputvalue= $this.val().slice(0, maxlength);
                                            $this.val("");
                                            $this.val(inputvalue);
                                        }
                                    });
                                }

Answer 4

Simply add onpaste fixed the problem

<textarea name="q<%=countNo%>_ans" rows="3" cols="55" maxlength="2000" style="resize: none;" onkeyup="new do_resize(this);" onKeyPress="return ( this.value.length < 2000); onpaste="return ( this.value.length < 2000);"></textarea>