Advanced Search

Input & Textarea Character Limit Display with jQuery

/ Published in: jQuery
Save to your folder(s)
This little jQuery snippet will let you quickly add a limit counter to input fields to display available remaining characters. A nice feature to include for improved user experience.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // DISCLAIMER: 
  2. // This is not my code. (got it from : http://www.scriptiny.com/2012/09/jquery-input-textarea-limiter/)
  3. // I just wanted to have a central repo
  4.  
  5. (function($) {
  6.     $.fn.extend( {
  7.         limiter: function(limit, elem) {
  8.             $(this).on("keyup focus", function() {
  9.                 setCount(this, elem);
  10.             });
  11.             function setCount(src, elem) {
  12.                 var chars = src.value.length;
  13.                 if (chars > limit) {
  14.                     src.value = src.value.substr(0, limit);
  15.                     chars = limit;
  16.                 }
  17.                 elem.html( limit - chars );
  18.             }
  19.             setCount($(this)[0], elem);
  20.         }
  21.     });
  22. })(jQuery);
  23.  
  24. //To setup the limiter, simply include a call similar to the one below:
  25. var elem = $("#chars");
  26. $("#text").limiter(100, elem);

URL: http://www.scriptiny.com/2012/09/jquery-input-textarea-limiter/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.