CODEWITHSUNDEEP
jquerytextareakeyup
Gojko Ubiparip
Gojko Ubiparip

Reputation: 45

JQuery typing limiter

Ok first time here and i already have a problem. I need to create typing limiter.. So when the 0 is reached, user cannot type anymore..

$('#text_area').keyup(function() {
    var max_length = 55;
    var area_length = $(this).val().length;
    var remaining_text = max_length - area_length;

    $('#area_feedback').html(remaining_text + ' characters left');
    if (remaining_text <= 0) {
        $(this).css('color','red');
        //what goes here ?

    } else {
        $(this).css('color','black');
    }
});

Upvotes: 0

Views: 93

Answers (3)

ATOzTOA
ATOzTOA

Reputation: 35950

Try using keypress event handler.

Like this: Live Demo

$('#text_area').keypress(function(e){
    var max_length = 55;
    var area_length = $(this).val().length;
    var remaining_text = max_length - area_length;
    $('#area_feedback').html(remaining_text + ' characters left');

    if(remaining_text <= 0){
        $(this).css('color','red');

        e.preventDefault();
        return false;
    }
    else{
        $(this).css('color','black');
    }
});

Upvotes: 1

writeToBhuwan
writeToBhuwan

Reputation: 3281

You should try this out: use KeyPress event and set the maxLength of your text area like mentioned below..

$('#text_area').keypress(function(){
   var max_length = 55;

   $('#text_area').attr('maxlength',max_length); //sets the max length of textbox to 55

   var area_length = $(this).val().length;
   var remaining_text = max_length - area_length;
   $('#area_feedback').html(remaining_text + ' characters left');
   if(remaining_text <= 0){
      $(this).css('color','red');          
   }
   else{
      $(this).css('color','black');
   }
});

Upvotes: 0

Panos Bariamis
Panos Bariamis

Reputation: 4653

maybe this jquery plugin help you

http://www.stjerneman.com/demo/maxlength-with-jquery

Upvotes: 0

Related Questions