How to create a "twitter like" remaining characters count with jQuery?

Question

I'm looking to enhance my WordPress theme's "Meta Description" and "title" tag input fields and I'd like to add a text snippet that evaluates the text input field after each keypress and updates the fields "target character count" just like Twitter's does.

For example, on the "Meta Description" field, the target character count is 160. So, if the field is blank, the number would be 160. As the user types, the count is decreased with each character added to the input field until it reaches zero.

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

Is there an existing jQuery script to do 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 know of, but here's something to get you started: http://jsfiddle.net/yzLbh/

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

Answer 2

It's nothing 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/

You basically handle every event on the textarea and check whether the length is greater/lesser than a threshold.

Answer 3

Bind a function on change of the input, check the length of the text, perform the subtraction, and update a 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

Check: 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 that (see this jsfiddle for a 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);
  });