CODEWITHSUNDEEP
javascriptjquerycounter
linkyndy
linkyndy

Reputation: 17928

Twitter-like textarea/input counter in jQuery

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!

Upvotes: 3

Views: 2913

Answers (5)

Saud Alfadhli
Saud Alfadhli

Reputation: 856

Here is a limitation by HTML if you like:

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

Upvotes: 1

Saud Alfadhli
Saud Alfadhli

Reputation: 856

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

​

Upvotes: 1

Brett Rigby
Brett Rigby

Reputation: 6226

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

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

Looks very easy to implement and very effective too.

Hope this helps.

Upvotes: 1

Jakub Truneček
Jakub Truneček

Reputation: 8990

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/

Upvotes: 4

Rob Stevenson-Leggett
Rob Stevenson-Leggett

Reputation: 35689

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

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

Upvotes: 1

Related Questions