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

发布于 2024-11-18 00:13:16 字数 407 浏览 3 评论 0原文

我正在试验 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 的计数器都不会遇到任何延迟。

我应该如何调整我的代码才能顺利运行？

谢谢你！

原文

I am experimenting with a textarea/input counter in jQuery. So far I have written this:

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

But somehow, if I press a key for more than 3 seconds, the counter kind of gets stuck, it decreases really slow. In comparison, Twitter's counter does not encounter any lag no matter how fast you type/hold a key down.

How should I tweak my code so it will run smoothly?

Thank you!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陌上青苔 2024-11-25 00:13:16

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

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

if you want use own code, try this. It is little plugin for this.

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

Fiddle for this is here: http://jsfiddle.net/XScwS/

回复收藏 0 原文

怪我入戏太深 2024-11-25 00:13:16

有一些现有的插件可以满足您的需求。

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

回复收藏 0 原文

陪你搞怪i 2024-11-25 00:13:16

在我自己搜索解决方案时发现了这个（并且还发现了您的问题！！）：

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

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

希望这有帮助。

回复收藏 0 原文

他不在意 2024-11-25 00:13:16

就像@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});
});

Like what @Jakub said.. but here is the same function but with minus counter if the count less than 0 it will count minus too

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

回复收藏 0 原文