Technology

Put Tips in your Text Fields with JavaScript

Real estate is a premium on a web site, so I’m trying to be a little more efficient with mine. I found this nifty little script with the Cutline WordPress theme from Tubetorial.

You can build a couple events directly in your text field HTML that will show and hide data as the field is entered and exited. Try it out on my sidebar where you can register for an email subscription to the blog.

<input type="text" name="email" value="Enter your email address" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your email address';}" />

With HTML5, you can also accomplish this with the placeholder element:

<input type="text" name="email" value="Enter your email address" placeholder="Enter your email address" />

Nifty!

Leave a Reply