NOTICE: jquery-input-replacement has moved! Please use the Github repository instead. The code for this plug-in is no longer updated here.

---

Overview

Places text within an input that gets replaced when a user clicks in the input.

Useful if you need to have a search box with a predefined piece of text that, when clicked, gets replaced.

Some other benefits are that if you predefine a value for the field, it will stay as is and not get replaced. Also, if you are using this for a username/password field and the user has their browser remember the username/password, it will not replace those values either, making it more user friendly.

Please see the video below to see how it works (at screencast.com):

This video shows how clicking or changing focus of the field restores the original text. It also shows that it respects default values and remembered passwords and shows the use of custom text and applying classes to the fields.

Please also see: http://www.danawoodman.com/2009/11/introducing-jquery-input-replacement/ for more information.

Installation

First, download or checkout jquery-input-replacement somewhere on your server (most likely where you are serving your other Javascript files from).

Next, you need to have jQuery for this plugin to work. I like using Google's hosted jQuery since it is served by Google and most likely people have it cached in their browsers. Put this in the <head> of your page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

Then, include the jquery-input-replacement code in your page:

<script type="text/javascript" src="http://jquery-input-replacement.googlecode.com/svn/trunk/jquery.input_replacement.pack.js"></script>

Note: This will serve the most recent version of the code from Google's servers (making loading faster).

Then all you need to do is call the plugin in you page. Put something like this in:

$(function() {
    $('#search').input_replacement();
});

... which will append the string "Search..." to the input whose ID is "search". You can also do something like:

$(function() {
    $('input').input_replacement();
});

... which will apply it to all inputs.

Examples

Below are a few more examples to get you running.

If you want to change the text of the field from the default of "Search...", do this:

$(function() {
    $('input').input_replacement({ text: 'My custom text...' });
});

If you want to have a class automatically applied to the input to style it (I use this to make the "Search..." text gray and italic so it is more subtle), you can do that by doing something like this:

$(function() {
    $('input').input_replacement({ prefocus_class: 'my-class-name' });
});

... and do to both of the above, do this:

$(function() {
    $('input').input_replacement({ text: 'My custom text...', prefocus_class: 'my-class-name' });
});