HTML Form Effect- Remove Default Value On Focus
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> |
brightcherry.co.uk
dude, I was just looking for this and your post saved the day, thx!
This doesn’t work in IE7
Big help, thanks.
Thanks Maruf. This is exactly what I was looking for, and simpler than I expected.
Works like a charm, thanks! I’m using it in the comments section of our blog.
helped me a lot.. bt i have one doubt.. if someone click on submit without writing anything then it will take the default value which is not required to do so.. what’s the solution of that?
Thanks dude !!! Works exactly the way I wanted….
how do you get it so that the default text is grey but when you type it types in black?
Can you email the extension to this code to my Email. Apart from this the ‘remove default value on focus’ form has been very successful. So Cheers.
The fatso
how can i apply this into textarea, becuase ther is no value option inside the textarea….?
the placeholder option does the exact same thing. just add placeholder=”Your Name”