jQuery plugin: add maxlength functionality to textarea with displaying the number of remaining characters
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
index.html
jquery.limitTextArea.js
readme.creole
style.css

readme.creole

LimitTextArea

LimitTextArea is a jQuery plugin. It limit the number of characters in textarea and displays the number of remaining characters.

How to use

1. set the maxlength attribute for textarea

<textarea name="text" cols="50" rows="5" maxlength="100">Some text here</textarea>

2.then put javascript:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="jquery.limitTextArea.js"></script> <script type="text/javascript"> $(document).ready(function() { $("textarea").limitTextArea(); }); </script>

Setting

You can pass these options to limitTextArea function:

  • labelContent - content of the label. Default: '{count} characters left', {count} will be replaced with number of remaining characters
  • labelClass - determines css-class for the label with number of remaining characters. Default is textAreaLabel
  • alertClass - css class will be added to the label when no remaining characters. Default is alert
  • hoverClass - css class will be added to the label when textarea receive focus. Default is hover

For example: $("textarea").limitTextArea({labelContent : 'Remaining characters: {count}'});