jquery.settextlimit.js

Last Updated 06/13/2013

setTextLimit is a jQuery plugin that makes it easy to display and enforce text limits on textarea fields and other text inputs (text, input and password fields are currently supported). In addition to enforcing the character limit, setTextLimit also displays a handy character counter which updates as the user types, letting them know just how much room they have left.

Download setTextLimit

Demo

Simply include the jquery.settextlimit.js file and call the function on the desired element(s).

Basic Example

$("#setTextLimitDemo1").setTextLimit(20);

Changing the available options

$("#setTextLimitDemo2").setTextLimit(20, {
  counterDescription: "You have entered "
  counterSeparator: " out of "
  counterEndText: " characters allowed."
});

Requirements

setTextLimit really doesn't require much:

• Any relatively recent version of jQuery
• Elements you'd like to apply setTextLimit to must have a unique id attribute

Options

setTextLimit accepts three options:

counterDescription

• This is a string which precedes the counter display.
• Defaults to an empty string

counterSeparator

• This is a string which separates the current character count from the element's limit.
• Defaults to "/"

counterEndText

• This is a string which will come at the end of the display.
• Defaults to an empty string

Markup and Styling

The script will wrap targeted elements in a div with a class "setTextLimitWrapper" and an id of "setTextLimitWrapper_$id", where $id is the id of the element being wrapped.

The display itself is contained within its own div with a class of "setTextLimitCounterWrapper" which is placed as the last child of the wrapper div above.

There are three elements in the display available for styling. The counter description (optional), which precedes the character count, is wrapped in a span with the class "setTextLimitCounterDescription". The count itself is wrapped in a span with the class "setTextLimitCount". Finally, the current character count itself is wrapped in a span with the class "setTextLimitCurrentCount".

Putting this all together, here's an example of what the markup looks like:

<div class="setTextLimitWrapper" id="setTextLimitWrapper_setTextLimitDemo">
  <textarea id="setTextLimitDemo" rows="4" cols="40"></textarea>
  <div class="setTextLimitCounterWrapper">
    <span class="setTextLimitCounterDescription"></span>
    <span class="setTextLimitCounter">
      <span class="setTextLimitCurrentCount" id="setTextLimitCurrentCount_setTextLimitDemo">0</span>/500
    </span>
  </div>
</div>

Questions or Comments

If you have any, just let me know!