jQuery的字符计数器问题

-2

发现这个非常简单的代码，显示字符计数我的文字输入：jQuery的字符计数器问题

http://www.jamesfairhurst.co.uk/posts/view/jquery_word_character_counter

我修改了它象下面。但是，当退格时它不能正常工作。它不会正确显示字符计数。有人可以帮助解决这个问题吗？

$(document).ready(function() { 
    $('.word_count').each(function() { 
     $(this).parent().find('.counter').html('Only ' + $(this).attr("size") + ' characters allowed'); 
     // bind on key up event 
     $(this).keydown(function(event) {    
      k = event.keyCode; 
      // eat backspaces, tabs, and CRs 
      if(($(this).attr("size") - $(this).val().length) == 0&&(k!=8&&k!=9&&k!=13)) { 
       event.preventDefault(); 
      } else { 
       if($(this).val().length==0) { 
       $(this).parent().find('.counter').html('Only ' + $(this).attr("size") + ' characters allowed'); 
       } else { 
       $(this).parent().find('.counter').html(($(this).attr("size") - $(this).val().length-1) + ' characters left'); 
       } 
      } 
     }); 
    }); 
});

http://jsfiddle.net/Mrbaseball34/RymcJ/16/

来源

2012-01-10 MB34

为什么不计数val（）。length每个模糊keyup（）事件？ – powtac 2012-01-10 17:25:05

有很多事情会有关脚本得到改善。你的问题的根源是由注释中描述：

// eat backspaces, tabs, and CRs

其次，它使用事件，所以它可能有一定的其他问题。它还需要size属性的计数，而不是更正确的maxlength属性。这是我会怎么把它改写：

$(document).ready(function() { 
    $('.word_count').each(function() { 
     var $this = $(this); 
     var counter = $this.parent().find('.counter'); 
     var maxlength = $this.attr('maxlength'); 

     counter.text('Only ' + maxlength + ' characters allowed'); 

     $this.bind('input keyup keydown', function() { 
      var value = $this.val(); 

      if(value.length > 0) { 
       counter.text((maxlength - $this.val().length) + ' characters left'); 
      } else { 
       counter.text('Only ' + maxlength + ' characters allowed'); 
      } 
     }); 
    }); 
});

Here's a demo.

来源

2012-01-10 17:22:20 Ryan

非常好。还处理剪贴板功能。 – MB34 2012-01-10 18:35:32

很好的答案和示例代码是非常好的谢谢 - 添加'输入'以及keyup和keydown修复了我的问题 – jpwynn 2012-08-31 02:47:22

这就是你所谓的“过编程”。参见：jsfiddle。

如果不是更好，它的工作原理也是一样的（因为它实际上可以识别退格）。

$(document).ready(function() { 
    $('.word_count').keyup(function() { 
     var $input = $(this); 
     $('.counter', $input.parent()).text($input.val().length); 
    }); 
});

对于这样简单的事情，您所关心的只是在该字段中的keyups。当然，这会产生类似于Shift,CTRL,ALT等等，但是由于您所做的只是计算字段的长度和更新跨度，所以它并不重要。 KISS的完美案例。

来源

2012-01-10 17:27:09

$(document).ready(function() { 
    var input = $('input.word_count'); 
    var counter = $('.counter'); 
    var size = input.attr('size'); 

    counter.text(size); 

    input.keyup(function() { 
     new_size = size - input.val().length; 

     if (!(new_size >= 0)) { 
      input.val(input.val().slice(0, -1)); 
     } else { 
      counter.text(new_size); 
     } 
    }) 
});

了工作演示见http://jsfiddle.net/powtac/XHsz6/18/。

来源

2012-01-10 17:42:32 powtac

jQuery的字符计数器问题

回答

相关问题