Resource Detail and Discussion #1429


		Home \| Community \| Developer's Paradise User Groups \| Site Tools \| Site Information \| Search

Main Menu

Resource

Automatically Clear Default Form Values

Categories...
Client User Group
Write Once!
Language
JavaScript
Product
IE3, IE4, IE5, NS3, NS4
Task
Form Enhancement
Technology
Dynamic Style, Intrinsic Controls

Sponsored Links

Developer's Paradise : Inside Technique :
Automatically Clear Default Form Values
Submission by SiteExperts Staff

Go to the resource:
Automatically Clear Default Form Values
Add to Assistant

Short Description
A very useful technique for automatically clearing descriptive text from input boxes for the user.

Long Description
A very useful technique for readying form input boxes when they receive the input focus by automatically clearing descriptive text.

This technique works in all scriptable browsers. We also provide an enhanced Internet Explorer version that allows you to customize the appearance of the default value using CSS.

Author: Scott Isaacs
Date/ Version: 11/15/1999
Submission URL: http://www.SiteExperts.com/tips/elements/ts27/page1.asp
Submission Date: Nov 10,1999
Last Update: Nov 15,1999

Discussion and Rate this Resource
Overall Rating: 4.3

ABTester on Mar 21, 2007 at 8:05:24 AM No Rating
To reinsert the caption, add a setDefault function and an ONBLUR="setDefault(this).

function setDefault(el) {
el.value = el.defaultValue
}

<form method="get" action="http://www.google.com/search"><input value="Google" type="text" name="q" size="31" maxlength="255" ONFOCUS="clearDefault(this)" ONBLUR="setDefault(this)"/></form>

Blake on Dec 15, 1999 at 12:41:43 PM No Rating

<html>

<head>

<title>Text Field Tricks</title>

<script>

function clearDefault(el) {

//Clear default or Select text entered

elSearchDefault==el.value ? el.value = "" : el.select()

}

function restoreDefault(el) {

//Restore default if text field is cleared

if (el.value=="") el.value = elSearchDefault

}

</script>

</head>

<body>

<form name="frmSearch">

Search:

<INPUT name="search" TYPE=text VALUE="" ONFOCUS="clearDefault(this)" ONBLUR="restoreDefault(this)">

</form>

</body>

<script>

elSearchDefault="Enter search text"

document.frmSearch.search.value=elSearchDefault

</script>

</html>
marvin on Nov 25, 1999 at 5:47:29 PM Rating: 4
Great script.

One quick Question.

I changed the script so it clears the text box every time they click on it

function clearDefault(el) {
if (el.value!= "") el.value = ""
}

But it crashes netscape when used with a submit button.

Any ideas

Marvin
blindbleu on Nov 23, 1999 at 5:42:29 PM Rating: 4
nice and easy. besides, details are important!
mlewis on Nov 18, 1999 at 6:02:42 AM Rating: 5
Nice idea. Simple to implement. Thanks!

More Ratings/ Comments

To rate and comment on a resource, you must first logon.

If you are not registered, please register yourself to become a member of the SiteExperts.community.