Show how many characters remaining in a html text box using javascript
By: Emiley J. in Javascript Tutorials on 2008-07-16
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.
- a text box that will show the number of characters remaining,
- a textarea to allow user to input data
- 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.
Add Comment
This policy contains information about your privacy. By posting, you are declaring that you understand this policy:
- Your name, rating, website address, town, country, state and comment will be publicly displayed if entered.
- Aside from the data entered into these form fields, other stored data about your comment will include:
- Your IP address (not displayed)
- The time/date of your submission (displayed)
- Your email address will not be shared. It is collected for only two reasons:
- Administrative purposes, should a need to contact you arise.
- To inform you of new comments, should you subscribe to receive notifications.
- A cookie may be set on your computer. This is used to remember your inputs. It will expire by itself.
This policy is subject to change at any time and without notice.
These terms and conditions contain rules about posting comments. By submitting a comment, you are declaring that you agree with these rules:
- Although the administrator will attempt to moderate comments, it is impossible for every comment to have been moderated at any given time.
- You acknowledge that all comments express the views and opinions of the original author and not those of the administrator.
- You agree not to post any material which is knowingly false, obscene, hateful, threatening, harassing or invasive of a person's privacy.
- The administrator has the right to edit, move or remove any comment for any reason and without notice.
Failure to comply with these rules may result in being banned from submitting further comments.
These terms and conditions are subject to change at any time and without notice.
Comments