Menu
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>
858
To use our Twitter counter, simply type your text in the textbox at the top of the page. You will see the tweet length displayed as Characters Typed above along with the Characters Remaining. The tweet length limit is 280 characters. Note that Twitter does not count words, it counts characters.
On November 8th 2017, Twitter doubled the character limit from 140 characters to 280 characters 1; we will refer to this as the character limit change (CLC).
As far as Twitter is concerned, every single character in a Tweet counts as one for the purposes of the character count. This includes not only letters and numbers, but also spaces and other punctuation; letters with accent marks are also counted as only one character, regardless of how you enter them.
We create a variable called characterCount which will hold our state, a function that will update it called setCharacterCount and we set the initial value of our characterCount to 0 (passing 0 to useState ). Finally, we get the total number of characters in the text area by using e. target. value.
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/
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
