Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old March 6th, 2010, 08:46 AM
Registered User
 
Join Date: Mar 2010
Posts: 8
Thanks: 3
Thanked 0 Times in 0 Posts
Default Use onblur to check no. of characters

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.
  #2 (permalink)  
Old March 6th, 2010, 05:36 PM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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.
The Following User Says Thank You to Old Pedant For This Useful Post:
olivaw (March 6th, 2010)
  #3 (permalink)  
Old March 6th, 2010, 06:43 PM
Registered User
 
Join Date: Mar 2010
Posts: 8
Thanks: 3
Thanked 0 Times in 0 Posts
Default

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.
  #4 (permalink)  
Old March 7th, 2010, 12:01 AM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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.
  #5 (permalink)  
Old March 7th, 2010, 12:18 AM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default maxlength

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">

Last edited by PeterPeiGuo; March 7th, 2010 at 12:28 AM..


Similar Threads
Thread Thread Starter Forum Replies Last Post
onBlur event - determining what caused the blur? MachThree Javascript How-To 2 October 2nd, 2009 12:29 PM
quick one: onblur - text box highlight retroviz BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 2 February 6th, 2008 05:18 PM
tabindexes don't work with onBlur function in Net elisabeth Javascript 14 November 24th, 2004 11:07 AM
Alternative to onBlur() event ashu_gupta75 Classic ASP Basics 3 April 30th, 2004 09:07 PM
Check Latin characters in form nikosdra Classic ASP Basics 4 June 27th, 2003 06:08 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.