I Use This!
Activity Not Available
Analyzed over 1 year ago. based on code collected over 1 year ago.

Project Summary

OverviewPlaces 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.

InstallationFirst, 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 of your page:

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

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() {
}); ... which will append the string "Search..." to the input whose ID is "search". You can also do something like:

$(function() {
}); ... which will apply it to all inputs.

ExamplesBelow 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' });


forms input jquery plugin replacement

In a Nutshell, jquery-input-replacement...

This Project has No vulnerabilities Reported Against it

Did You Know...

  • ...
    Black Duck offers a free trial so you can discover if there are open source vulnerabilities in your code
  • ...
    data presented on the Open Hub is available through our API
  • ...
    use of OSS increased in 65% of companies in 2016
  • ...
    you can embed statistics from Open Hub on your site

30 Day Summary

Apr 9 2016 — May 9 2016

12 Month Summary

May 9 2015 — May 9 2016


Be the first to rate this project
Click to add your rating
Review this Project!