Change text box onmouseover

Bravogolf · Sep 15, 2004

Hello.
How can I change the backgroun colour of a textbox within a form when there is a mouseover event?

Also, when the user actually clicks on said box, to make the default data in it dissappear.
For example, I have a textbox within a form titled email with a default value of "Not applicable". When the mouse moves over this box, I want the colour to change. And when the user clicks on the box, I would like the value "Not applicable" to clear so that the user can type his/her email

Please!

WartookMan · Sep 15, 2004

The following should do the trick. It has a global variable set up so that the input field for the email address is only cleared once (from it's initial value):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>Untitled</title>

<script type="text/javascript">
function HighlightBackground(obj,color) {
	obj.style.backgroundColor = color;
}
var emailCleared = false;
function ClearInput(obj) {
	if (!emailCleared) {
		if (obj.name = "email") {
			obj.value = "";
			emailCleared = true;
		}
	}
}
</script>

</head>
<body>
<form name="theForm">
<input onclick="ClearInput(this)" onmouseover="HighlightBackground(this, '#ffeeee');" onmouseout="HighlightBackground(this, '#ffffff');" name="email" type="text" value="Not applicable">
</form>
</body>
</html>

Hope this helps.

Pete.

Web Developer & Aptrix / IBM Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lwwcm.com/

e: Pete.Raleigh(at)lclimited.co.uk

Bravogolf · Sep 15, 2004

Super. Thank you very much Pete

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Change text box onmouseover

Bravogolf

Programmer

WartookMan

Technical User

Bravogolf

Programmer

Similar threads

Part and Inventory Search

Sponsor