Question

<input type="text" class="home" value="google.com" onblur="if(this.value=='')
{this.value='google.com'}" onfocus="if(this.value=='google.com'){this.value=''}" />

This is my input. It has two event onblur and onfocus. I want to apply different styling rules for different events. For example: style="color:black;" for onfocus and style="color:red;" for onblur.

How would I accomplish this?

Answer 1

I would suggest a pure CSS solution – it’s much simpler and much cleaner!

HTML

<input type="text" class="home" value="google.com" />

CSS

.home:focus {
    color:red;
}

Once the control loses focus, it will return to it’s original state automatically. Or, automagically as I like to say.

Here’s a working fiddle.

Additional Information

See The dynamic pseudo-classes: :hover, :active, and :focus