jQuery: Dynamic Character Count - jQuery Snipplr Social Repository

Revision: 62022

at January 29, 2013 00:15 by mattvbiggs

Updated Code

var maxchar = 1500;            
var count = $('#txtDescription').val().length;
var char = maxchar - count;
$('#charleft').text(char + " characters left");

$('#txtDescription').keyup(function () {
   var len = $(this).val().length;
   if (len >= maxchar) {
     $('#charleft').text("You have reached the character limit!");
   } else {
     var chardiff = maxchar - len;
     $('#charleft').text(chardiff + " characters left");
   }
});

Revision: 62021

at January 29, 2013 00:12 by mattvbiggs

Initial Code

$('#txtDescription').keyup(function () {
   var maxchar = 500;
   var len = $(this).val().length;
   if (len >= maxchar) {
     $('#charleft').text("You have reached the character limit!");
   } else {
     var chardiff = maxchar - len;
     $('#charleft').text(chardiff + " characters left");
   }
});

Initial URL

Initial Description

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.

Initial Title

jQuery: Dynamic Character Count

Initial Tags

jquery

Initial Language

jQuery

Choose a language for easy browsing: