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

这是一个演示。

Answer 2

这就是你所说的“过度编程”。请参阅：jsfiddle。

它的效果即使不是更好，也同样好（因为它实际上可以识别退格键）。

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

对于如此简单的事情，您所关心的只是字段中的 keyups 。当然，这会捕获诸如 Shift、CTRL、ALT 等内容，但因为您所做的只是计算字段的长度并更新跨度，这并不重要。 KISS 的完美案例。

Answer 3

$(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/ 查看工作演示。