Counting the characters dynamically inside a textarea and setting a limit

We can write one textarea counter to show our visitors the number of text or characters they entered inside the textarea. This counter will keep updating it self on entry or delete of any character inside the textarea. The counter shows decreasing value showing how many more characters can be entered or left to be entered. This way the visitor can keep track on its text entry based on the maximum length limit shown by the counter.

Every time as the text entered inside the textarea we can't send data to server so we will execute this program by using client side JavaScript.

Inside the Textarea we will use to event handlers, one is onKeyPress and other is onKeyDown. Both the event handlers will trigger one function in JavaScript. Inside this function we will check the length of the characters inside the textarea by using my_form.my_text.value.length with the maximum value set. If the length is less than the maximum set value then we can update the counter but if length is equal to or more than the set value then we can trim ( or remove ) the extra input from the string. We also can display one alert message if required.

demo of textarea counter

Here is the code
<html><head>
<title>(Type a title for your page here)</title>

<script language=JavaScript>
<!--
function check_length(my_form)
{
maxLen = 50; // max number of characters allowed
if (my_form.my_text.value.length >= maxLen) {
// Alert message if maximum limit is reached. 
// If required Alert can be removed. 
var msg = "You have reached your maximum limit of characters allowed";
alert(msg);
// Reached the Maximum length so trim the textarea
	my_form.my_text.value = my_form.my_text.value.substring(0, maxLen);
 }
else{ // Maximum length not reached so update the value of my_text counter
	my_form.text_num.value = maxLen - my_form.my_text.value.length;
}
}
//-->
</script>

</head>

<body>
<form name=my_form method=post>
<textarea onKeyPress=check_length(this.form); onKeyDown=check_length(this.form); 
 name=my_text rows=4 cols=30></textarea>
    <br>                               
<input size=1 value=50 name=text_num> Characters Left
</form>

</body>
</html>

Event Handling onMouseOver and onMouseOut

Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    duna

    30-05-2012

    thank you, this worked well for me.
    shana

    10-07-2012

    its very useful to all
    Peter

    19-07-2012

    Thanks, u helped me so much :)
    Cristian

    04-10-2012

    thanks a lot for the code!
    Ram

    23-04-2013

    Damn Good Code
    Raman

    23-04-2013

    The code was right but need for button disabling with alert too
    589

    30-06-2014

    good
    Manoj Kumar

    23-07-2014

    Thnks sir, for best way of your code
    srilakshmi

    19-12-2014

    great job this is simple user understandable code,nd this helps me thanqx.
    srilakshmi

    19-12-2014

    Damn good job
    madhu

    03-08-2015

    You code is very usefull ...Thanks
    Akshit Saxena

    25-08-2015

    what if we press the "Backspace"... the code crashes in word count in that case... cannot be applied to major project.. can you please help it out...??
    Aravind

    30-04-2016

    useful to beginner

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer