jQuery Placeholder is a plugin to simplify placeholder text in input fields. Simply add a (non-standard, but being discussed by HTML5 working group for inclusion) 'placeholder' attribute containing the text you want in your text box when there is no user input and call $(inputfield).placeholder() and you're done.

Of course, there are settings you can provide to customize the plugin for your preferred experience. Placeholder takes an object of settings.

key

Placeholder takes advantage of the built in $.data method to store and retrieve the initial placeholder value so you can customize the data key that is used to avoid collisions.

attr

If you're a standards fanatic and refuse to use the placeholder attribute you can specify a different attribute for storing the initial placeholder the plugin retrieves.

className

The plugin adds a class to the input field when placeholder text is in place and removes it automatically when users focus to the field or when non-default text is in place. By default the className value is 'placeholder'

values

If you're so much of a standards fanatic that you won't lower yourself to using non-standard attributes OR to using standard attributes in nonstandard ways, you can provide an array of default values in which case the plugin leaves your html attributes completely alone. (It's an array because the expected use of this plugin would be to call $(form.elements).placeholder() or something along those lines so you would need to provide an array: one value for each field in the form)

blockSubmit

blockSubmit lets you block the form associated with the given input field from submitting is the placeholder text has not been replaced. There are no visual cues however, so those would have to be done separately.

blankSubmit

blankSubmit clears the field if it still contains its placeholder text before allowing the form submit to go through.

onSubmit

For complete control over what happens on submit you can specify a submit method which is called on submit. Currently, this method will have no knowledge of which field it is associated with, only the form. Additionally, this method will be called for each individual input field you assign a placeholder for so be prepared to handle that on your end.

value (New!)

This lets you specify the value the plugin resets to on focus.

cursor_position (New!)

This lets you specify the position of the text on focus. Only useful when used in conjunction with the new value property. This property is silently ignored if you do not have a setCursorPosition plugin attached to jQuery.

Downloads