Question

我正在尝试使用jQuery中的textarea / input计数器。到目前为止，我写了这个：

$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

有一些现有的插件能够满足您的需求..

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

Answer 3

在我自己寻找解决方案时找到了这个（并且还找到了你的问题!!）：

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

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

希望这有帮助。

Answer 4

就像@Jakub说的那样......但是这里的功能是相同的但是如果计数小于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 5

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

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

jQuery中类似Twitter的textarea /输入计数器

5 个答案: