A jQuery plugin to count the number of characters allowed in input fields and textareas similar to Twitter but with more options and flexibility.
The simplest usage is:
$('selector').textCounter();
More complex examples can be found at http://GaryStorey.com/textcounter.
This section will show you the basics of how to configure the textCounter plugin. The following is a list of all the options available and their default values:
| Option | Description | Default |
|---|---|---|
| countDown | Should the text counter count down from maximum value (true) or up to it (false). | true |
| counterPatternClass | The class to apply to the textPattern when the warnAt value has been met or passed. | counterTextPattern |
| counterWarningClass | The class to apply to the text counter element when the warnAt value has been met or passed. | counterWarning |
| defaultClass | The default class used for the text counter. Unless overridden, the same class will be used for all textCounter objects. | textCounter |
| easing | The easing mode the transition should use. Possible values include swing and linear. Additional options are available via jQuery UI. | swing |
| maxLength | The default maxlength value to apply to any field that does not have the attribute set. Enforces this value on Opera and Internet Explorer versions that do not support the maxlength attribute. | 500 |
| posX | The X-axis where the counter should appear. Possible values include: left, center , right, or any integer. | right |
| posY | The Y-axis where the counter should appear. Possible values include: top, center , bottom, or any integer | bottom |
| posXoffset | The number of pixels on the X-axis to move the counter from it's default position of posX. | 0 |
| posYoffset | The number of pixels on the Y-axis to move the counter from it's default position of posY. | 0 |
| progressBarClass | The default class used for the progress bar . | counterProgressBar |
| showBeforeWarn | Should the text counter be shown before reaching the warnAt value. Possible values include: true and false. | true |
| textPattern | The text to be displayed in the counter. The following constants will be replaced:
| [+] / [=] |
| transition | The transition to use when showing the text counter. Possible values include: none, fadeToggle, slideToggle or any defined jQuery toggle method. | slideToggle |
| transitionSpeed | In milliseconds the amount of time for the transition to last. | 200 |
| txtWarningClass | The class to apply to the textarea/input element when the warnAt value has been met or passed. | txtWarning |
| warnAt | The number of characters, or percentage, remaining when the warningClass will be applied. | 10 |
| zIndex | the css z-Index value to be used for the textCounter object. | 100 |
If you want to override a default option globally for the textCounter object(s), you can make a call to the textCounter options object. The below will change the default transition from "slideToggle" to "none" for all textCounters and changed the default zIndex option to 200.
$.fn.textCounter.options.transition = "none";
$.fn.textCounter.options.zIndex = 200;
- Tested with jQuery 1.7.1+.
- Compatible with IE 7+, Firefox 11+, Opera 11.61+, and Chrome 17+.
Feel free to email me if you have any questions.
- Convert to "contextual" approach (not everything in DOM ready). Wait for focus on element before adding functionality.
- Add options as "data-" attributes on the selected items.
- Convert to more class based approach instead of ID's.
- Use classes or "data-" attributes to hold state. ('.hasTextCounter' , '.showingTextCounter', etc. )
- Continue to simplify and optimize the code.
© 2013, Gary Storey ( http://garystorey.com ) Released under MIT License.