Available chars counter and maxlength attribute polyfill for <textarea/>'s

View the Project on GitHub mjlescano/freeChars

freeChars jQuery Plugin

Minimal characters counter for textarea/input elements. Also works as a polyfill for "maxlength" attribute.


Inlcude the scripts:

<!-- jQuery (1.9 or newer). -->
<script type="text/javascript" src="lib/rAF.js"></script>
<!-- (optional) window.requestAnimationFrame Polyfill for good performance on old browsers. -->
<script type="text/javascript" src="//"></script>
<!-- The plugin :D -->
<script type="text/javascript" src="src/jquery.freeChars.js"></script>

Then simply call .freeChars():

  update: $('span#textareaCount')

You could also set a custom handler to be called when the textarea value changes. It will recieve two arguments, the available characters to be used and the current maxlegth value.

  onUpdate: function(available, maxlength){
    console.log('There are '+available+' characters left.')
    console.log('The textarea can only have '+maxlength+' characters.')


Full Example

<textarea maxlength="30"></textarea>
  <span id="count"></span>
<script type="text/javascript">
  var $count = $('#count')
  $('textarea').freeChars({ update: $count })

Support or Contact

Developed by @mjlescano. Issues and Pull Requests welcome :D

MIT Licensed