A brand new, lightweight, JavaScript plugin for limiting the number of characters in a <textarea></textarea>.
I know what you're thinking - there's an HTML property for that! Yes, but it doesn't work consistently in modern browsers. Webkit properly reports a pair of '\r\n' for each carriage return in the textarea while other browsers interpret these differently. This plugin aims to accurately quantify the amount of data within a given textarea and prevent extra characters from being entered from the browsers in question, while also enforcing maxlength in older browsers (by including a max-length property in addition to maxlength: tested in IE5 - IE11, Chrome, Firefox).
maxLength.js also gives you an easy way to embed Characters Remaining counters to your webpage. All you will need is a textarea with an ID and a simple HTML snippet that is fully customizeable.
Check out the Code & Documentation on my Github page.
Announcement: all external dependencies have been removed from maxLength.js. maxLength.js is ~2.38KB gzipped and comes with an awesome set of utility functions: jDom.js.
It's pretty simple: all you need is a textarea with an ID and a maxlength attribute and an element which you give the class: 'maxLength' and property: data-textareaid='someID'. There are some basic settings baked right in to get you up and running.
(You do not need to include the text within the .maxLength span, the script is simply acting upon the HTML used to generate these docs)
I've added a few data-parameter driven options which you can use to make a unique UX. Here's an example:
(You do not need to include the text within the .maxLength span, the script is simply acting upon the HTML used to generate these docs)
You can add multiple Characters Remaining counters, customize their text, and add a 'warning' class to the counter element with a customizeable warning threshold (# characters remaining). Submit an issue on Github if there's something else you'd like this script to do and I'll think about it.
Try adding a couple more letters to the textarea to the right to trigger the warning class.
Options are chosen via the data-attributes assigned to your counter element. The available options are summarized below. Please let me know if you'd like some additional functionality.
Copyright (c) 2013 Jonathan Greenemeier
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.