Basit Basit - 6 months ago 117
jQuery Question

How to prevent user to enter text in textarea after reaching max character limit

I want to prevent user to enter text in textarea once it reaches a max character limit. What was happening that when i reached to max limit then my text-area scroll-bar moved to top I somehow prevent this with this code.

jQuery(document).ready(function($) {
$('textarea.max').keyup(function() {
var $textarea = $(this);
var max = 400;
if ($textarea.val().length > max) {
var top = $textarea.scrollTop();
$textarea.val($textarea.val().substr(0, max));
$textarea.scrollTop(top);

}
});
}); //end if ready(fn)


But i also want that after reaching max limit user unable to type anything in the textarea. Currently what happen that after reaching max limit if user press and hold the key, the characters are typing in the text area, although after releasing the button it come back to original text (i.e $textarea.val($textarea.val().substr(0, max)); ). But i want that once this condition become true

if ($textarea.val().length > max) {


user unable to type anything. I want that cursor vanishes from the textarea. But if user remove some text then cursor also available for user to type input again. How can I do it?

Answer

The keyup event fires after the default behaviour (populating text area) has occurred.

It's better to use the keypress event, and filter non-printable characters.

Demo: http://jsfiddle.net/3uhNP/1/ (with max length 4)

jQuery(document).ready(function($) {
    var max = 400;
    $('textarea.max').keypress(function(e) {
        if (e.which < 0x20) {
            // e.which < 0x20, then it's not a printable character
            // e.which === 0 - Not a character
            return;     // Do nothing
        }
        if (this.value.length == max) {
            e.preventDefault();
        } else if (this.value.length > max) {
            // Maximum exceeded
            this.value = this.value.substring(0, max);
        }
    });
}); //end if ready(fn)