For textbox/textarea limit the length of input on typing, but not on paste.

Question

Hello. I got a strange requirement:

function TextLimit(elem, maxChars) { ... }

Where elem is a textarea or input of type=text and maxChars is the maximum number of characters that could go into the elem. The code inside the function must limit the length of the text inside elem to maxChars when the user is typing. However, if the user is pasting for the first time, the elem must take everything that was pasted even if the pasted text has more characters then maxChars. EDIT: If the pasted text is longer then maxChars, then after pasting for the first time, the user can't type/paste anymore, unless the text is deleted/backspaced to a length smaller then maxChars.

Any suggestions using plain JavaScript or jQuery would be appreciated.

The maxlenght attribute doesn't allow for pasting. Setting/removing it programmaticaly on paste, doesn't work well in all browsers. Taking substring of elem's value on keydown/keypress/keyup produces some funky results.

Answer 1

Something like this seems to work:

Couple of things to work out still, like allowing the delete key if the max is reached. Should be easy fixes though.

Try it out: http://jsfiddle.net/wxUZz/7/ (updated)

function TextLimit(elem, maxChars) {
    var permittedKeys = [8,37,38,39,40,46];

    elem.focus(function() {
        if(elem.val().length >= maxChars) {
            elem.data('prevent', true);
            elem.data('value', elem.val());
        }
    });

    elem.blur(function() {
        if( elem.data('prevent') ) {
            elem.val( elem.data('value') );
        }
    });

    elem.keydown(function(event) {
        var count = elem.val().length;
        if(count >= maxChars && $.inArray(event.which, permittedKeys) < 0) {
            elem.data('prevent', true);
            elem.data('value', elem.val());
            return false;
        } else {
            elem.data('prevent', false);
        }
    });  
}

TextLimit($('#myTextarea'), 30);

Answer 2

There is a nice blog article which covers this topic.