Thursday, April 17, 2014

JavaScript and jQuery: Limiting and Auto-Update-Counting the Input Value Length

This method is a standard way to limit the tweet characters on Twitter.
We can't have a single tweet with more than 140 characters. If you type more than that, Twitter will give warning and disable the tweet button, with showing the negative count of the exceeding characters.

Actually, I don't know how they did that. I just came up with something to imitate the contenteditable div behavior there. Twitter tweet text window uses div element because they need to highlight the extra characters. We can't do that with input element. Well, we can manipulate things, but it's just not worth it and the result will tend to not-cross-browser.

I'll show you how to do that, the concept, with the auto-updated characters counting. It's using keyup and keydown events.
This (the script) will work on ≥ IE8. I don't know about < IE8.

Let's use form and input instead of a div element. I styled the HTML elements a bit and made one CSS class to emphasize the warning-ish sign.


DEMO
JavaScript version


jQuery version



The elements stacking looks like this :



Then the CSS :



Finally, the JavaScript:



You can customize the maximum limit by putting different value. Also, if you want, you can reverse this method to have some minimum length of characters. Same concept, but you need to tinker a little the if-else statements.

That's about it. Thanks for joining the fun.

No comments:

Post a Comment

Tell me what you think...