Programming Tutorials

Show how many characters remaining in a html text box using javascript

By: Emiley J. Printer Friendly Format    

Assuming you have a html form that has a textarea or a input text box to enter text. If you only have to allow a specic number of characters into that box and remove any text that he enters after the set limit, and the same time when the user starts typing in the text box if you want to show how many characters are remaining then you can do so using this simple but effective java script.

For this you will need the following.

1. a text box that will show the number of characters remaining,
2. a textarea to allow user to input data
3. a javascript that does the trick.

For step 1.

Add the following code in your form.

<input onblur="textCounter(this.form.recipients,this,306);" disabled  onfocus="this.blur();" tabindex="999" maxlength="3" size="3" value="306" name="counter">

For step 2. 

Add the textarea to accept input

<textarea onblur="textCounter(this,this.form.counter,306);" onkeyup="textCounter(this,this.form.counter,306);" style="WIDTH: 608px; HEIGHT: 94px" name="message" rows="1" cols="15" >
</textarea>

For step 3.

Add the following function in your html page.

function textCounter( field, countfield, maxlimit ) {
 if ( field.value.length > maxlimit ) {
  field.value = field.value.substring( 0, maxlimit );
  field.blur();
  field.focus();
  return false;
 } else {
  countfield.value = maxlimit - field.value.length;
 }
}

Thats it you are done. You can try this code in your page and it will work as below.

characters remaining.