Javascript length and textarea maxlength don't match up

Question

Problem: I have a javascript function that counts the number of characters in the textarea and outputs it to my console. I also have maxlength set on my textarea.
The problem is, that sometimes my sum and textarea maxlength dont line up.

For example, the textarea would be blocking my input, but the sum varible would show me , that I still have characters left. Especially, when I type fast or when I insert multiple characters at the same time.

How can I solve this? Thanks

HTML:

<textarea maxlength="100"></textarea>

Javascript:

var inputArea = $('textarea');
inputArea.keyup(function(){
   var sum = 100 - inputArea.val().length;
console.log(sum);
});

JSFiddle: http://jsfiddle.net/RnTHJ/3/

@Sann: I was able to break it..is there even a way of doing this? :D — intelis, Mar 29 '13 at 03:27
Something must be wrong with your browser. It works awesome on mine. — ShuklaSannidhya, Mar 29 '13 at 03:40
@Sann: it seems like it works on some browsers and breaks on others.. — intelis, Mar 29 '13 at 03:42

loxxy · Answer 1 · 2013-03-29T03:39:08.343

1

try keypress, it works : http://jsfiddle.net/RnTHJ/4/

Best would be using the change event though.

EDIT:

How about using keydown & not re assigning from input length every time. (fiddle)

var inputArea = $('textarea.test');

var sum = 100;

inputArea.keydown(function (evt) {
    var evt = window.event ? window.event : e;
    var k = evt.keyCode ? evt.keyCode : e.which;

    if(k>48) { 
        if(sum>0) sum--;
    }
    else {
         if(sum<100) sum++;   
    }

    $(this).siblings().text(sum);
});

As a sample, I check only for a random case 48... You could be checking for all the alphabets & numbers, if possible. The backspace checked explicitly with its keycode.

edited Mar 29 '13 at 03:39

answered Mar 29 '13 at 03:14

loxxy

12,990
2
25
56

No, this has the same problem (for me). Try pressing the enter key lots of times... (Chrome on Win7) – Lee Taylor Mar 29 '13 at 03:16
keypress doesn't update on backspace. change doesn't update until you click/tab away from the textarea (onblur). – jszobody Mar 29 '13 at 03:17
@jszobody yes, but keypress updates on the very first character press. – loxxy Mar 29 '13 at 03:21
hm.. but at the end the sum still holds a number and textarea is blocking input. is there any other way? – intelis Mar 29 '13 at 03:23

score 1 · Accepted Answer · answered Mar 29 '13 at 03:17

1

You are likely firing so many "keyup" events that when you type fast or enter multiple characters at a time the events are not necessarily finishing the the order they were fired, and you end up with a sum that is a couple characters old.

You might want to try a small timeout, and cancel the timeout each time you start a new one. Something like:

var timeoutVariable;
var inputArea = $('textarea');
inputArea.keyup(function(){
   window.clearTimeout(timeoutVariable);
   timeoutVariable = setTimeout(runSum(),100);
});

function runSum() {
   var sum = 100 - inputArea.val().length;
   console.log(sum);
}

http://jsfiddle.net/RnTHJ/8/

answered Mar 29 '13 at 03:17

jszobody

28,495
6
61
72

thanks it looks like an interesting solution, but i can still "confuse" the sum variable.. – intelis Mar 29 '13 at 03:24
Really? I haven't been able to break it so far. Try increasing the 100 millisecond time to a bit more. – jszobody Mar 29 '13 at 03:25
Nope, it breaks. press enter and backspace a few times.. :) – intelis Mar 29 '13 at 03:28
1

Ah, the enter key. I'm seeing that some browsers count that as two characters, it's inconsistent. Line breaks are messing with your characters count. – jszobody Mar 29 '13 at 03:34
See http://stackoverflow.com/questions/11675997/maxlength-not-counting-properly-in-chrome-but-does-well-in-ff and http://stackoverflow.com/questions/10030921/chrome-counts-characters-wrong-in-textarea-with-maxlength-attribute. Your javascript .length is going to have problems matching the maxlength check if there are line breaks. – jszobody Mar 29 '13 at 03:39
You could go with pure js. Get rid of the maxlength attribute altogether. In javascript check the length, and if it exceeds 100 set it back with inputArea.val(inputArea.val().substr(0, 100)); – jszobody Mar 29 '13 at 03:47

score 0 · Answer 3 · answered Aug 22 '15 at 18:45

I know this is an old thread but the only reason it won't match up in my experience is due to newline characters. If you hit enter/return in the field that actually counts as two characters (\r\n) against the maxlength validation not just one (\n) like most people would expect. Maybe that's the issue you're having with counts not matching up?

Javascript length and textarea maxlength don't match up

3 Answers3