How to create a twitter like counter with jQuery?

Question

I want to improve the input theme of the "Meta Description" and "title" tags in WordPress, and I would like to add a piece of text that evaluates the text input field after each keystroke and updates the "target character count" fields "like twitter."

For example, in the “Meta Description” field, the number of target characters is 160. Thus, if the field is empty, the number will be 160. As the user types, the number decreases with each character added to enter the field until it is will not reach zero.

If the counter is larger than the target, the numbers are written in red with a minus sign in front (again, like twitter).

Is there an existing jQuery script for this?

<label class="screen-reader-text" for="excerpt"> Post Excerpt (Meta Description) <span class="counter">150</span> characters* </label> <textarea rows="1" cols="40" name="excerpt" tabindex="6" id="excerpt"></textarea> 

Answer 1

Not that I knew, but here is what you need to start: http://jsfiddle.net/yzLbh/

Edit: Andy E is right - I should (and now have) added support using the input event, which works if you hold a keystroke, insert, drag and drop, etc. in browsers that support it. http://jsfiddle.net/yzLbh/5/

Answer 2

This is not too complicated:

Js

 maxCharacters = 160; $('#count').text(maxCharacters); $('textarea').bind('keyup keydown', function() { var count = $('#count'); var characters = $(this).val().length; if (characters > maxCharacters) { count.addClass('over'); } else { count.removeClass('over'); } count.text(maxCharacters - characters); }); 

HTML:

 <textarea></textarea> <p> <strong>You have <em id="count"></em> characters remaining</strong> </p> 

CSS

 .over { color: red; } 

Demo: http://jsfiddle.net/HgfPU/10/

Basically you process each event in a text field and check if it is greater / less than the threshold.

Answer 3

Bind the function to change the input, check the length of the text, perform subtraction and update the div with it.

HTML

 <input type='text' id='from_box' /> <div id='to_box'><span id='remaining'>160</span> characters remaining</div> 

JQuery

 $("#from_box").bind("keyup", function(){ var max_characters = 160; var total_used = $("#from_box").val(); var remaining = max_characters - total_used; $("#remaining").text(remaining); }); 

Answer 4

take a look at this list of plugins:

http://plugins.jquery.com/plugin-tags/character-counter

Answer 5

Note: http://jsfiddle.net/2FLjt/

 $('#checkval').keyup( function() { var value = $(this).val(); // get MAX chars from textarea var maxlength = $(this).data("maxlength"); var compare = maxlength - value.length; // decide if chars is under/over if (compare >= 0) { $("#inputcounter").removeClass('error').html(compare + "characters left"); } else if (compare < 0) { $("#inputcounter").addClass('error').html(compare + "characters left"); } }); 

Answer 6

You can do it like this (see this jsfiddle for proof):

• HTML:

   <input type="text" class="twitter-like" value="" /> <div>Remaining characters: <span class="twitter-counter" data-default-value="160"></span></div> 

• JavaScript:

   var counter = jQuery('span.twitter-counter[data-default-value]'); counter.html(counter.data('default-value')); jQuery('input.twitter-like').bind('keyup',function(){ counter.html(counter.data('default-value') - jQuery(this).val().length); });