HTML Form Effect- Remove Default Value On Focus

Dec 4th, 2008
Maruf scribbled this post.

This Javascript form effect basically removes the default value (e.g Your Name) when the input field is on focus. If nothing is entered, and focus is taken away from the input field, the value is displayed again.

It’s a pretty cool effect, which I’m always using on a lot of projects. Here’s an example (click in the input field, and then click outside the input field):

1
2
3

<form>
<input type="text" value="Your Name" name="name" onblur="if (this.value == '') {this.value = 'Your Name';}"  onfocus="if (this.value == 'Your Name') {this.value = '';}" />
</form>