HTML5 setPlaceholder jQuery Plugin

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.

HTML Script

Create an input textfield then assign a unique ID.

{code type=’html’}
<input type=”text” id=”field1″ name=”fieldname” />
{/code}

Include files

Download the latest jquery and the placeholder plugin then include the files in your code.

{code type=’javascript’}
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.placeholder.js”></script>
{/code}

Javascript Code

Attach the placeholder hint to the input field like the following:
{code type=’javascript’}
<script type=”text/javascript”>
$(“#field1″).setPlaceHolder(“This is the placeholder text”);
</script>
{/code}

That simple.

Grab the plugin and sample file from the link below.

This is actually the first jQuery plugin I’ve published.

Download from Google Codes

• jQuery setPlaceholder Plugin
• Sample HTML file

Helpful Reading

• Placeholder Attribute

Happy coding!