Allows you to set placeholder text for form fields
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Placeholder plugin for jquery using HTML5 data attributes

Following versions of jQuery are supported:

  • 1.4

  • 1.4.1

  • 1.4.2

  • 1.4.3

  • 1.6.2

Other version have not been tested but it is assumed to worked from 1.4.0 onwards


Download jQuery from Then download src/jquery-placeholder.js


  1. Have a text field like below:

<input type="text" name="q" data-placeholder="Product or Service" class="search">
  1. Call the 'placeholder' method on a class you define. In the above example we will use the class 'search'


This will add the text in the data attribute 'data-placeholder' as the value or the form field. When the placeholder text is active, the field will also gain a class called placeholder-input which can be used to style the text.



Allows you to change the HTML5 data attribute name.


This will change the plugin to look for the default text in the data attribute called 'data-default'


Allows you to change the color of the placeholder.

$('.search').placeholder( { color:'#b9b9b9' });

This will change the colour of the placeholder text. When focused, the input color will revert to what was originally defined

Note: If you styled the colour of the entered text inline with the HTML, this will get cleared. But you really shouldn't be styling there anyway.


  • Allow changes to the active placeholder class that gets inserted.