Remaining Characters Counter

To find out how many characters remaining in input box or textarea when user type, like we see in Twitter or Delicious and other sites as well.


Add this code in your input box or textarea.

onfocus="characterCount(250,, 'whyMeCount');"  and  maxlength="250"

250 is the number of characters you what the box should take. You can change it as per your need.
whyMeCount is the id (#whyMeCount) of the html element where you want to display the count
and, whyMe id the id of the element on which we need to count characters on.

<textarea id="whyMe" onfocus="characterCount(250,, 'whyMeCount');" maxlength="250"></textarea>
<div id="whyMeCount"></div>

Now, add this JavaScript function in your script tag

function characterCount( text_max, boxId, countId ){
	var text_length = $( '#' + boxId ).val().length;
	if(text_length > 0) {
		$( '#' + countId ).html((text_max-text_length) + ' characters remaining');
	} else {
		$( '#' + countId ).html(text_max + ' characters remaining');
	$( '#' + boxId ).on('keyup blur', function() {
		text_length = $( '#' + boxId ).val().length;
		var text_remaining = text_max - text_length;
		$( '#' + countId ).html(text_remaining + ' characters remaining');

Toggling Default Value of Textbox on Focus

When you click on the textbox, the dafault value disappears and when the focus loses, the default value appears in the text box.
<div><input type=”text” name=”firstname” id=”firstname” value=”eg. Siddharth Jain” onfocus=”if(this.value==’eg. Siddharth Jain’){this.value=”;}” onblur=”if(this.value==”){this.value=’eg. Siddharth Jain’;}” /></div>