Activity Not Available
0
I Use This!

Project Summary

Analyzed 4 months ago. based on code collected 4 months ago.

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() {
$('#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.

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

Share

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

Activity

30 Day Summary

Apr 9 2016 — May 9 2016

12 Month Summary

May 9 2015 — May 9 2016

Community

Ratings

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