Use onblur to check no. of characters

olivaw · March 6th, 2010, 08:46 AM

I'm trying to use onblur to check the number of characters a user would put into a textarea. This is the code I have so far which obviously isn't working:

Code:

<html>
<head>
<title>Health Insurance Questionnaire</title>
<script language="Javascript">
function checkchar1()
{
if (document.first.length > 20)
{
alert("You have exceeded the number of characters. Please write no more than 20.")
}
}
</script>
</head>
<body>
<h1><center>Health Insurance Questionnaire</center></h1>
<p>First Name:&nbsp  <textarea rows="1" cols="30" name="first" onblur="checkchar1()"></textarea></p>
</body>
</html>

Any help in solving this would be much appreciated.

Thanks.

Old Pedant · March 6th, 2010, 05:36 PM

But then your check doesn't occur until the user moves off of the field.

And while you could capture keystrokes, how does that help if the user copy/pastes something in using only the mouse?

The best answer, I think, is something like this:

Code:

<script>
var MAXSIZE = 200;
function checkTAsize( )
{
    var fld = document.FormName.FieldName;
    if ( fld.value.length > MAXSIZE ) 
    {
        fld.value = fld.value.substring(0,MAXSIZE);
        alert("Only " + MAXSIZE + " characters allowed"); // message is optional of course
    }
}
</script>
...
<body onload="setInterval('checkTAsize()', 250);">
...

Having said all this...

Why would you use a TEXTAREA for a ONE LINE field value like First Name????

Just use

Code:

<input name="name" size="20" maxsize="20" />

And the browser won't allow more than maxsize characters to be entered. No JS needed.

olivaw · March 6th, 2010, 06:43 PM

Quote:

Why would you use a TEXTAREA for a ONE LINE field value like First Name????

Yeah I thought this too but it's for an assignment and I was told to do it in this way.

After I posted this I actually figured it out anyway by doing:

Code:

function checkchar1()
{
if (document.form0.first.value.length > 20)
{
alert("The field cannot contain more than 20 characters!");
}
...
<form name="form0">
<p>First Name:&nbsp  <textarea rows="1" cols="30" name="first" onblur="checkchar1()"></textarea></p>

Thanks for your help anyway.

Old Pedant · March 7th, 2010, 12:01 AM

Well, I would do it onchange instead of via onblur, but neither one is really all that effective.

Pardon me for saying it's a dumbass assignment.

PeterPeiGuo · March 7th, 2010, 12:18 AM

In real application, for things like first name, you use a text box like below, so you don't even need to write code to validate the maximum length:

Code:

<input type="text" maxlength="20">