One of the nifty features that HTML5 for input fields is the placeholder attribute.
What is a placeholder ?
It is the hint text placed inside a textfield describing what the fields is for. It disappears whenever you click or focus inside the input field.
The following field should look something like the image above in browser that supports the attribute.
The attribute is supported by latest versions of major browsers except Internet Explorer.
I’ve been previously reusing a block of code until I decided to write a jquery plugin for it.
Below is how to use and implement the plugin.
Create an input textfield then assign a unique ID.
<input type=”text” id=”field1″ name=”fieldname” />
Download the latest jquery and the placeholder plugin then include the files in your code.
Attach the placeholder hint to the input field like the following:
$(“#field1″).setPlaceHolder(“This is the placeholder text”);
Grab the plugin and sample file from the link below.
This is actually the first jQuery plugin I’ve published.