●Home ●Search ●Previous ●Next

maxlength plugin

It's a fairly common design pattern to want to limit the number of characters the user can input in a field whilst giving feedback to the user on how much they have left. So I've built a little jQuery plugin to do the work for me.

MY EBOOK£5 for Working the Command Line Gain command-line shortcuts and processing techniques, install new tools and diagnose problems, and fully customize your terminal for a better, more powerful workflow. £5 to own it today

Maxlength Plugin

The plugin simply reports back the number of characters left the user has, with a few extra bells and whistles. Download the maxlength jQuery plugin

Demonstration

View the maxlength demo This demo shows off two example, one limiting on characters and one limiting on words.

Example Code

<form action="/comment">
  <p>Characters left: <span class="charsLeft">10</span></p>
  <textarea maxlength="10" class="limited"></textarea>
</form>
<script type="text/javascript">
  $('textarea.limited').maxlength({
    'feedback' : '.charsLeft'
  });
</script>

The default version of the maxlength plugin reads the maxlength attribute from the text element. However, since this isn't a valid HTML attribute if added to a textarea you can configure the plugin to read the value from a hidden input:

<form action="/comment">
  <p>Characters left: <span class="charsLeft">10</span></p>
  <textarea class="limited"></textarea>
  <input type="hidden" name="maxlength" value="10" />
</form>
<script type="text/javascript">
  $('textarea.limited').maxlength({
    'feedback' : '.charsLeft',
    'useInput' : true
  });
</script>

The plugin can be applied to input elements, but if you want to limit by words, rather than characters, you need to put the maxlength as a hidden input (otherwise the browser will use it's default behaviour to limit the user's input).

Plugin Options

●feedback - the selector for the element that gives the user feedback. Note that this will be relative to the form the plugin is run against. ●hardLimit - whether to stop the user being able to keep adding characters. Defaults to true. ●useInput - whether to look for a hidden input named 'maxlength' instead of the maxlength attribute. Defaults to false. ●words - limit by characters or words, set this to true to limit by words. Defaults to false. Published 30-Jun 2008 under #code & #jquery & #plugin. Edit this post

Links

●About Remy ●Work with Remy ●Speaking & Training ●Links ●Things I Fixed ●Things I Learned ●Books I've Read ●Ethos ●House Rules ●The Attic ●On GitHub ●On Twitter ●RSS feeds ●Search

Remy Sharp

Follow rem

3,397 followers

I'm a JavaScript developer working professionally on the web since 1999. I run my own consultancy, build products, run training, speak at conferences and curate the UK's best JavaScript conference. You can hire me too.

License

All content by Remy Sharp and under creative commons and code under MIT license. All code and content for this blog is available as open source on GitHub.