Simple script for creating cross browser input placeholders

-

Introduction

When building HTML forms, most browsers support the placeholder attribute:

but this does not always work in the older browsers therefore you have to dynamically add and remove the value of the input attribute using the blur and focus javascript events.

Example Usage

The HTML:

If you want to apply this to all input text boxes globally you can just use some inline JavaScript. First you get all the input text boxes:

Then you loop over each input text box and apply the Blur and Focus event listeners:

Or you can use JavaScript prototypes, this example also allows you to add a data attribute (data-placeholder) to your input elements and then parse the parent element (this could be the the form element for example).

The fiddle: http://jsfiddle.net/PZ645/

Comments

Visitor stats.