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/