jQuery 中的类似 Twitter 的文本区域/输入计数器

Question

我正在 jQuery 中试验文本区域/输入计数器。 到目前为止，我已经写了这个：

$textarea.keyup(function(){
    $chars_remaining.html((200 - parseInt($textarea.val().length)));
});
$textarea.keydown(function(){
    $chars_remaining.html((200 - parseInt($textarea.val().length)));
});

但不知何故，如果我按下一个键超过 3 秒，计数器就会卡住，它的减少非常缓慢。 相比之下，无论您键入/按住键的速度有多快，Twitter 的计数器都不会遇到任何延迟。

我应该如何调整我的代码以使其顺利运行？

谢谢！

Answer 1

如果你想使用自己的代码，试试这个。 这是一个小插件。

(function($) {
    $.fn.counted = function(options) {
        var settings = {
            count: 300
        };    
        options = $.extend(settings, options || {});
        return this.each(function() {       
            var $this = $(this);    
            var counter = $('<div/>').html(options.count).insertAfter($(this));           
            $(this).keyup(function(e) {
                var count = options.count - $this.val().length;
                if (count >= 0) {
                    counter.html(count);
                } else {
                    $this.val($this.val().substr(0, options.count));
                    counter.html(0);
                }
            });
        });
    };
})(jQuery);

$(function() {
    $('textarea.counted').counted({count: 10});
});

小提琴在这里： http://jsfiddle.net/XScwS/

Answer 2

就像@Jakub 所说的那样.. 但这里是相同的 function 但如果计数小于 0 则带有负计数器，它也会计数为负

(function($) {
$.fn.counted = function(options) {
    var settings = {
        count: 300
    };     
    options = $.extend(settings, options || {});
    return this.each(function() {       
        var $this = $(this);     
        var counter = $('<div/>').html(options.count).insertAfter($(this));            
        $(this).keyup(function(e) {
            var count = options.count - $this.val().length;

            // Here is the change
            counter.html(count);

        });
    });
};

})(jQuery);

$(function() {
    $('textarea.counted').counted({count: 10});
});

Answer 3

如果您愿意，这是 HTML 的限制：

<input type="text" maxlength="2" />

Answer 4

有一些现有的插件可以做你想做的事..

http://plugins.jquery.com/plugin-tags/char-limit

Answer 5

在我自己搜索解决方案时发现了这个（也发现了你的问题：！）：

http://cssglobe.com/post/7161/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas

看起来很容易实现，也很有效。

希望这可以帮助。