jQuery字符计数器问题

Question

找到这个非常简单的代码来显示我的文本输入的字符数:

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/

Answer 1

关于该脚本,有很多事情可以改进.注释描述了您的问题的根源:

// eat backspaces, tabs, and CRs

接下来,它使用该keydown事件,因此可能存在某些其他问题.它还从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');
            }
        });
    });
});

这是一个演示.