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


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

Basic Example


Changing the available options

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


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


setTextLimit accepts three options:


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


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


  • 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

Questions or Comments

If you have any, just let me know!

© 2006-2020 quixfox at gmail dot com some rights reserved