Search code examples
javascripthtmlgoogle-chrometextareamaxlength

Chrome counts characters wrong in textarea with maxlength attribute

Here is an example:

$(function() {
  $('#test').change(function() {
    $('#length').html($('#test').val().length)
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id=test maxlength=10></textarea>
length = <span id=length>0</span>

Fill textarea with lines (one character at one line) until browser allows. When you finish, leave textarea, and js code will calculate characters too.

So in my case I could enter only 7 characters (including whitespaces) before chrome stopped me. Although value of maxlength attribute is 10:

imgur

Solution

  • Your carriage returns are considered 2 characters each when it comes to maxlength.

    1\r\n
1\r\n
1\r\n
1

    But it seems that the javascript only could one of the \r\n (I am not sure which one) which only adds up to 7.