jQuery: Dynamic Character Count


/ Published in: jQuery
Save to your folder(s)

Handy code snippet for keeping track of the number of characters a user is entering into a textbox or textarea. It will dynamically update the count as the user is typing. This also works with copy & paste.

The top snippet will automatically calculate the current count after the page loads; use the .keyup event to do the dynamic update.

All of this code should be in the $(document).ready.


Copy this code and paste it in your HTML
  1. var maxchar = 1500;
  2. var count = $('#txtDescription').val().length;
  3. var char = maxchar - count;
  4. $('#charleft').text(char + " characters left");
  5.  
  6. $('#txtDescription').keyup(function () {
  7. var len = $(this).val().length;
  8. if (len >= maxchar) {
  9. $('#charleft').text("You have reached the character limit!");
  10. } else {
  11. var chardiff = maxchar - len;
  12. $('#charleft').text(chardiff + " characters left");
  13. }
  14. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.