HTML5 Textarea Max-Length Ends Early

Question

I am trying to use max-length in a textarea with jQuery Mobile, and I have run into a strange problem - the problem is that with or without the return false used in javascript, the textarea stops me from entering text anywhere from 15 to 60 characters too early..

The maxLength property is set to 1150, and I am able to type between 1090 and 1115 characters. I don't know if it is a function of using copy and paste, as this is the only way I have tested it, but it seems weird.

Here is the code:

$(document).delegate('#main','pageinit',function() {
    $('#title,#description').keypress,function(e){

        var cur=$(this).val().length,
        max=$(this).prop('maxLength'), rem=max-cur,
        ch=$(this).parents('.ui-bar').find('.char-rem'),
        red=$(this).parents('.ui-bar').find('.char-rem.red'),           
        green=$(this).parents('.ui-bar').find('.char-rem.green');

        ch.children('span').html(rem);

        if(rem <= 10)
        {
            green.removeClass('green')
            ch.addClass('red');
        } else {    
            red.removeClass('red')
            ch.addClass('green')
        }
        if(rem == 0)
        {
            if(e.which!= 8)
            {
                return false;
            }
        }

    })
})

What happens every time, is that I get down to some low amount of characters remaining - but more than zero - and I can't type anymore. The same thing happens if I remove the following:

if(rem == 0)
{
    if(e.which!= 8)
    {
        return false;
    }
}

I have tried this with keydown and keyup as well, and inside or outside pageinit, and made various other adjustments, and I have verified the number of characters in the textarea with the textarea textLength property, and each time the result is the same.

Right now, I am using Chromium to test this, and I haven't tested it elsewhere, but I want to see if there is something I am just missing.

Any clues?

Did you type in 1190 chars or did you copy paste? Sometime unseen whitespace characters come into picture. — Hindol, May 16 '12 at 01:37
It seems you are correct. I found this - http://stackoverflow.com/questions/10030921/chrome-counts-characters-wrong-in-textarea-with-maxlength-attribute[/link], and though I have to double check, this seems to be the answer. — dgo, May 16 '12 at 12:57

dgo · Accepted Answer · 2013-04-14T16:41:21.200

My previous note about the line breaks wasn't the answer. The answer was that each time the function got called, it was reading the maxLength property newly. For some reason, in reading the maxLength property, the count was getting messed up.

When I switched the variable for the maxLength value to a number (1150) instead of a making it read the property, it worked perfectly.

EDIT WITH REAL ANSWER:

Actually, the real answer was that I had unclosed html tags, so who knows what it was doing. When I fixed the tags, all was well

K. Kilian Lindberg · Answer 2 · 2013-04-14T10:52:03.290

Here's an alternative solution. With this maxlength will function for textareas as well.

/*****************************/
// SET MAX NUMBER OF CHARACTERS FOR ALL TEXTAREAS TROUGH ATTRIBUTE maxlength="*"
jQuery('textarea[maxlength]').keyup(function(){  
  //get the limit from maxlength attribute  
  var limit = parseInt($(this).attr('maxlength'));  
  //get the current text inside the textarea  
  var text = $(this).val();  
  //count the number of characters in the text  
  var chars = text.length;  
  //Create counter, once
  if (!jQuery(this).prev("span").length) {
    jQuery(this).before('(Tecken <span class="charsleft"></span> av max ' + limit + ')');
  }
  //Update counter
  jQuery(this).prev('.charsleft').html(chars); 
  //check if there are more characters then allowed  
  if(chars > limit){  
  //and if there are use substr to get the text before the limit  
  var new_text = text.substr(0, limit);  
  //and change the current text with the new text  
  jQuery(this).val(new_text);  
  }  
});  
/*****************************/

HTML5 Textarea Max-Length Ends Early

2 Answers2