jquery - JQuery 输入限制器

Question

好的，第一次来这里，我已经有问题了。我需要创建打字限制器。所以当达到 0 时，用户不能再打字了。

$('#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');
    }
});

Answer 1

尝试使用keypress事件处理程序。

像这样：现场演示

$('#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');
    }
}); 

Answer 2

也许这个 jquery 插件可以帮助你

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

Answer 3

您应该尝试一下：使用 KeyPress 事件并设置文本区域的 maxLength，如下所述..

$('#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');
   }
});