Javascript to show how many characters are remaining to enter in textbox or textarea

Hello,
Today we will be seeing a javascript which will help us to show how many characters are remaining for a textbox or textarea,As soon as the user starts typing in a textbox or textarea, then we will show how many characters are remaining for entering into the textbox.

Here we are creating a simple textbox, and we are specifying the "maxlength" of the textbox to 20.

<br /><label for="mytextbox">Your Name : </label><br /><input type="input" id="mytextbox" maxlength="20" onkeyup="javascript:countCharacters('mycounter',20,'mytextbox')"><br /><br/><span id="mycounter">20</span><br />

And "onKeyUp" event of the textbox we are calling a javascript function "countCharacters()".

we will be writing a standard function which accepts only some parameters and rest of the processing will be done in the function.

To this function we have to pass 3 parameters
1) id of the span - where counter will be shown when user types something
2) max_chars - length of the textarea which we specified in maxlength="20"
3) myelement - the id of the textbox where user types text

The function is as below

<br />//http://programming-in-php.blogspot.com/<br />function countCharacters(id,max_chars,myelement)<br />{<br />counter = document.getElementById(id);<br />field = document.getElementById(myelement).value;<br />field_length = field.length;<br /> if (field_length <= max_chars) { <br />// Here we Calculate remaining characters <br />remaining_characters = max_chars-field_length; <br /> // Now Update the counter on the page<br /> counter.innerHTML = remaining_characters;<br /> }<br /> }

Now you can use this function anywhere, without a need to modify this function.

The full code to try out is here

<br />//http://programming-in-php.blogspot.com/<br /><br /><script type="text/javascript"><br />function countCharacters(id,max_chars,myelement)<br />{<br />counter = document.getElementById(id);<br />field = document.getElementById(myelement).value;<br />field_length = field.length;<br /> if (field_length <= max_chars) { <br />// Here we Calculate remaining characters <br /> remaining_characters = max_chars-field_length; <br />// Now Update the counter on the page <br /> counter.innerHTML = remaining_characters; }<br /> } </script><br /><br /><label for="mytextbox">Your Name : </label><br /><input type="input" id="mytextbox" maxlength="20" onkeyup="javascript:countCharacters('mycounter',20,'mytextbox')"> <span id="mycounter">20</span><br /><br />

Put a link back to our site, if you like this !