How to prevent user from entering text into a form field using JQuery?

Question

I want to prevent the user from entering more than 100 characters into a textarea. I already wrote the code that will detect when the user's post reaches 100 characters. But I have no idea how to prevent him from typing any more beyond that point:

$(document).ready(function(){

   $('.comment').keyup(function(){
       var count = this.value.length;
       if (count > 100) {

           // what goes here???

       }           
   });

});


  <textarea class="comment" rows="10" cols="30"></textarea>

you should have server side validation of this too, obviously :D — Gordon Gustafson
– Gordon Gustafson, Commented Sep 2, 2010 at 1:38
what if you hold down a keyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy? — robotdana
– robotdana, Commented Sep 2, 2010 at 2:07

user113716 · Accepted Answer · 2010-09-02 01:36:59Z

3

Using keypress may be nicer. You could just return false;

$('textarea').keypress(function() {
    if(this.value.length >= 100) 
        return false;
});

This also prevents the user from holding down a key to enter several characters beyond the limit.

If you want to use keyup, you could do this:

$('.comment').keyup(function(){
   var count = this.value.length;
   if (count > 100) {

    this.value = this.value.substr(0,100);

   }           
});

edited Sep 2, 2010 at 1:36

answered Sep 2, 2010 at 1:30

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tanguy · Accepted Answer · 2010-09-02 02:29:30Z

1

jQuery('textarea').keypress(function(e) {
    if(this.value.length >= 100) {
        e.preventDefault();
        return false;
    }
});

preventDefault is needed for some browsers like IE and supported by all; but really needed only for a href onclick

keyup is not the good event to prevent keys... key repeat is made with keydown

edited Sep 2, 2010 at 2:29

answered Sep 2, 2010 at 2:03

Tanguy

2,2671 gold badge18 silver badges8 bronze badges

Comments

griegs · Accepted Answer · 2010-09-02 01:31:56Z

0

$(document).ready(function(){
    $('textarea[maxlength]').keyup(function(){
        var max = parseInt($(this).attr(’maxlength’));
        if($(this).val().length > max){
            $(this).val($(this).val().substr(0, $(this).attr('maxlength')));
        }

        $(this).parent().find('.charsRemaining').html('You have ' + (max - $(this).val().length) + ' characters remaining');
    });
});

From http://that-matt.com/2008/07/textarea-maxlength-with-jquery/

There is also a plugin for this http://remysharp.com/2008/06/30/maxlength-plugin/

answered Sep 2, 2010 at 1:31

griegs

22.8k33 gold badges132 silver badges208 bronze badges

Collectives™ on Stack Overflow

How to prevent user from entering text into a form field using JQuery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related