Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

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.

tag: 0.1.0

Fetching latest commit…

Cannot retrieve the latest commit at this time

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
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:
[+]
- 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
[+] / [=]
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

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.