Limiting the Length of Text Inputs - J Query

Problem
It is common to limit the amount of characters in a textarea, like the 140 characters for Twitter or the 500 characters for a You Tube comment. Informing the user that he entered too much, after he submitted a form, is frustrating, so it makes sense to display an indicator of the available characters left.

Solution

The max length plugin solves this by adding a “Characters left: x” indicator in front or after the textarea. The plugin, after being applied on a text input or textarea, looks for an element with the class chars Left to update with the count:

To make this less intrusive, we can create the necessary elements with jQuery, resulting in a simpler form markup:

Discussion

In the case of Twitter, the text area allows you to go over the 140-character limit, but you can’t submit. This helps a lot when pasting longer text that would n’t fit into the 140-character limit and editing it after ward. To get a similar effect with the max length plugin, we can set the hardLimit option to false. However, that doesn’t affect the actual submit but could be handled else where, e.g., by the validation plugin (see Recipe (Validating Forms)).
The plugin also supports counting words instead of characters, by setting the words option to true.
Instead of having the plugin look for the default .charsLeft selector, we can also set the feedback option.
Here is another example using all three of these options:


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics