change color onclick for default textbox value

**loren.hibbard.i** · 01-11-2011, 07:25 PM

Hello,

I've been trying to make a default value in a text box go away when clicked.

The general consensus on this forum and on the rest of the internet seems to be that this code:
<script>
function clearText(field){
if (field.defaultValue == field.value) field.value = ''
else if (field.value == '') field.value = field.defaultValue;
}
</script>

<body>
<input name="emailaddress" type="text" id="email_box" value="Enter Your Email Address" onFocus="clearText(this)" onBlur="clearText(this)">
</body>

works pretty well. But I wonder how I can add a color change to this function. They default value "enter email address here" would be in grey, but when the user begins to type, it would be black. then deleted what'd been typed, back to grey.

document.getElementById(email_box).style.color='#000000'; .....is that too naïve..? It didn't work no matter where I put it. And dreamweaver didn't like it when I tried to copy the syntax of the first function, but make it change colors instead. It furthermore hated me trying to assign two different functions to the onClick event.

It also didn't like at all when I tried to apply two classes to the same object...

All in all, it's been pretty disagreeable today.

Thank you in advance to anyone who can help me out!

Thomas

**trandrus** · 01-11-2011, 08:16 PM

this should work:

css:

Code:

#email_box {
	color:#999;
}

js:

Code:

function clearText(field)
{
	if (field.defaultValue == field.value) {
	
		field.value = '';
		field.style.color = '#000000';
		
	} else if (field.value == '') {
	
		field.value = field.defaultValue;
		field.style.color = '#999999';
	}
}

**loren.hibbard.i** · 01-11-2011, 11:14 PM

Hi trandrus,

That is massively helpful: Thank you!

Is «defaultValue» a built-in javascript function? Ditto «field»? Because then if «onFocus="clearText(this)"» passes «this» to your function in a way in which javascript recognizes «this» as a (text)field, your code actually sort of makes sense to me...if «this» is the sort of thing that can be put into a line of html (which I wasn't previously aware of)....

If this is all garbage, I have to apologize: your code is too concise for me

Would it be too much an imposition to ask you to explain a bit how it works?

Many thanks!
Thomas

**Kor** · 01-12-2011, 07:10 AM

Originally Posted by loren.hibbard.i

Hi trandrus,

That is massively helpful: Thank you!

Is «defaultValue» a built-in javascript function? Ditto «field»? Because then if «onFocus="clearText(this)"» passes «this» to your function in a way in which javascript recognizes «this» as a (text)field, your code actually sort of makes sense to me...if «this» is the sort of thing that can be put into a line of html (which I wasn't previously aware of)....

If this is all garbage, I have to apologize: your code is too concise for me

Would it be too much an imposition to ask you to explain a bit how it works?

Many thanks!
Thomas

- the defaultValue is a native JavaScript property of the form's elements. It will return always the value (if set by default - i.e. physically written) of the HTML native attribute value.

- this is a sort of self-reference of an element. In your case, it is the reference of the text field.

But it depends on the syntax. this might refer a new created object within a constructor. Or simply the Window Global Object, if it is written within a function which is not a constructor.

Thread: change color onclick for default textbox value

Thread Tools

Display

change color onclick for default textbox value

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions