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.


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.