Question

我正在尝试创建一个简单的字符计数器，显示用户是否输入了最少数量的字符，然后才能按Enter键。

$(document).ready(function(){

 $('#notification').hide();
 $('#press_enter_notification').hide();  

   var allow_enter = false;
   var min = 4;
   var max = 30;
   var char_count = 0;

   $("#form_textbox").keydown(function() {

      $('#press_enter_notification').hide();  

      if(this.value.length < min) {
         char_count = min - (this.value.length) -1;
         //alert('Too short');
         $('#notification').show("fast");
         $('#notification').text(char_count + ' more characters to go');
         allow_enter = false;

      } else if(this.value.length >= max) {
         char_count = (this.value.length) - max;
         this.value = this.value.substring(0,max);
         $('#notification').show("fast");
         $('#notification').text(' no more characters remaining');

      } else {
         char_count = max - (this.value.length) -1;
         $('#notification').show("fast");
         $('#notification').text(char_count + ' characters remaining');
         $('#press_enter_notification').show("fast");
         allow_enter = true;
      }   
   });

   $("form").submit( function () {
      if (allow_enter == false)
      {
         $('#press_enter_notification').show("fast").text('you cannot press enter yet');
         return allow_enter;
      }  
   } );


});

它有效，但它有以下怪癖：

当您输入内容并删除所有文本时，字符计数消息不会消失或向后计数
当你删除所有内容时，它还要再添加3个字符，我必须在if(this.value.length < min) { char_count = min - (this.value.length) -1;添加-1，否则它会让你输入5个字符，然后再停止说3,2,1个字符。< / LI>
如果您在浏览器或jsbin中尝试此操作，您会注意到它们。我怎样才能对它进行排序呢？

谢谢。

Answer 1

您需要将keydown()更改为keyup()，因为在按键完全完成之前未记录长度。你需要检查keydown的唯一方法是你是否阻止了返回或制表符等的默认值。

您现在也可以删除-1 hack。

JS小提琴：http://jsfiddle.net/VPD3j/

Answer 2

其中一个问题是在运行该按键操作之前keydown会触发。您可以通过更改为keyup来解决此问题。按键上的字符计数器有很多问题（无论是keydown，keyup等）。例如，如果一个人按下按钮，偶数会发射一次。

我会考虑查看已创建的众多插件之一。 http://plugins.jquery.com/plugin-tags/character-counter

编辑：稍加修改，你可能想要绑定keyup，keydown和keypress。这将解决一些问题：

$("#form_textbox").bind("keydown keyup keypress"...

字符计数器上奇怪的jQuery错误

2 个答案: