admin 管理员组

文章数量: 1086019

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 parison, 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!

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 parison, 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!

  • javascript
  • jquery
  • counter
Share Improve this question asked Jun 29, 2011 at 16:25 linkyndylinkyndy 18k24 gold badges118 silver badges205 bronze badges 2
  • 3 Works fine on Chrome: jsfiddle/s8hP9 What browser do you use? – PeeHaa Commented Jun 29, 2011 at 16:28
  • I'm using Firefox 5, but have several tabs opened, which should reflect a normal user's browsing environment. The browser responds very laggy in these conditions and I believe it shouldn't. Or am I making too many worries? – linkyndy Commented Jun 29, 2011 at 16:41
Add a ment  | 

5 Answers 5

Reset to default 4

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

There's a few existing plug ins that do what you want..

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

Found this whilst searching for the solution myself (and also found your question!!):

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

Looks very easy to implement and very effective too.

Hope this helps.

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

​

Here is a limitation by HTML if you like:

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

本文标签： javascriptTwitterlike textareainput counter in jQueryStack Overflow

版权声明：本文标题：javascript - Twitter-like textareainput counter in jQuery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744073781a2528968.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。