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

Here's a demo.

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/。

jQuery字符计数器问题

3 个答案: