Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A jQuery plugin to count the number of characters left in input fields and textareas similar to Twitter but with more options and flexibility.
JavaScript
branch: master

This branch is 10 commits ahead, 3 commits behind gh-pages

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.gitignore
README.md
jquery.textCounter.css
jquery.textCounter.js
jquery.textCounter.min.js
textcounter.jquery.json

README.md

textCounter

A jQuery plugin to count the number of characters allowed in input fields and textareas similar to Twitter but with more options and flexibility.

Usage and Examples

The simplest usage is:

$('selector').textCounter();

More complex examples can be found at http://GaryStorey.com/textcounter.

Options and the Default Values

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:

Options and Defaults
OptionDescriptionDefault
countDownShould the text counter count down from maximum value (true) or up to it (false).true
counterPatternClassThe class to apply to the textPattern
when the warnAt value has been met or passed.
counterTextPattern
counterWarningClassThe class to apply to the text counter element when the warnAt value has been met or passed.counterWarning
defaultClassThe default class used for the text counter. Unless overridden, the same class will be used for all textCounter objects.textCounter
easingThe easing mode the transition should use. Possible values include swing and linear. Additional options are available via jQuery UI.swing
maxLengthThe 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
posXThe X-axis where the counter should appear. Possible values include: left, center , right, or any integer.right
posYThe Y-axis where the counter should appear. Possible values include: top, center , bottom, or any integerbottom
posXoffsetThe number of pixels on the X-axis to move the counter from it's default position of posX.0
posYoffsetThe number of pixels on the Y-axis to move the counter from it's default position of posY.0
progressBarClassThe default class used for the progress bar . counterProgressBar
showBeforeWarnShould the text counter be shown before reaching the warnAt value. Possible values include: true and false.true
textPatternThe text to be displayed in the counter. The following constants will be replaced:
[+]
- The characters remaining/typed based on the countDown option
[=]
- The maximum number of characters based on the maxlength attribute
[%]
- The percentage of characters remaining/typed based on the countDown option
[+] / [=]
transitionThe transition to use when showing the text counter. Possible values include: none, fadeToggle, slideToggle or any defined jQuery toggle method.slideToggle
transitionSpeedIn milliseconds the amount of time for the transition to last.200
txtWarningClassThe class to apply to the textarea/input element when the warnAt value has been met or passed.txtWarning
warnAtThe number of characters, or percentage, remaining when the warningClass will be applied.10
zIndexthe css z-Index value to be used for the textCounter object.100

Globally Overriding the Defaults

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;

Miscellaneous

  • 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.

To Do's

  • 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.

Something went wrong with that request. Please try again.