How can I block further input in textarea using maxlength

Have you tried ​the maxlength attribute? That will block input once the character limit is reached.

<textarea maxlength="150"></textarea>​​​​​​​​​​​​​​​​​​​​​​​​​​ // Won't work
<input type="text" maxlength="150" />

Edit It appears that maxlength for a textarea works in Chrome, but not in other browsers, my bad. Well, another approach would just be to monitor keydown events and if length>150, return false/preventDefault/however you want to stop the default action. You’d still want allow backspace and enter however, so monitor keycode as well.

$('#yourTextarea').keydown(function(e) {
    if (this.value.length > 150) 
        if ( !(e.which == '46' || e.which == '8' || e.which == '13') ) // backspace/enter/del
            e.preventDefault();
});

Leave a Comment