Characters Remaining Function for Forms
JavaScript Script to Count Remaining Characters
Sometimes you need to limit the amount of characters allowed in a textarea, but the other day, I needed to go one step further and display the amount of characters left in real time as the user writes inside the form. This makes your website very interactive and the code or JavaScript to get it done is pretty straightforward.
Inside your HTML form, in your textarea, create a function call onkeyup and onkeydown to a javascript function that will calculate and spit back the results inside a div in your body. Lets give that div a name “remaining” and place it below a div that shows maximum number of characters allowed:
<form>
<textarea name=”text” onkeyup=”CountLeft(this.form.text,5000);” onkeydown=”CountLeft(this.form.text,5000);”>
</textarea>
</form>
<div>5000 Characters Maximum</div>
<div><span id=”remaining”>5000</span> Characters Remaining</div>
Now, lets write one simple javascript function that will calculate the remaining characters and print the results inside the “remaining” div as the user presses the keyboard:
The JavaScript needs to live inside the HEAD and form and divs need to live inside the BODY. Check out the demo and provide feedback in the comments.
Popularity: 4%
If you enjoyed this post, please consider to leave a comment.
Comments
No comments yet.
Leave a comment