Advanced Search

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.

Expand | Embed | Plain Text

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.