jQuery Hint

Originally written by Remy Sharp – http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

I improved on it a little bit by adding optional settings and resetting the styles of the input box to its original style when user starts to enter text.

Also now lives in Github so people can fork :)

  You will see a lot of web sites with search boxes have text already populated inside 
  of the field and when you select the input text box it disappears and reappears when it’s not selected.  

Known issues

• resetCursorPos does not work on IE- at least on IE 8. If someone can fix that and send a patch please do. Search for createTextRange on the source. No worries the current version does not create any JS error on the browser.

Screenshot of the demo

Changes:

• January 27, 2011 v1.2 – Added 2 options:
  1. retain – if the hint should stay or not when the input field is in focus, defaults to true
  2. resetCursorPos – should the cursor move to the start of the input field on focus or not, defaults to true

To use:

<script type="text/javascript" src="jquery.hint-1.1.js"></script>

And modify all input text fields with title attribute

  $("input[title!='']").hint();

You could of course apply it to specific input text field:

   $("input#username").hint();

The following are the possible options:

color – color of the hint text (defaults to “gray”)
fontStyle – font style of the hint text (defaults to “italic”)
blurClass – class name to apply when the input text field hint is showing up (defaults to “blur”)

Eg,

    $("input[title!='']").hint({ color: 'blue', fontStyle: 'normal'});

If you want to set these options only once, override it after the plugin has loaded like so:

$.fn.hint.color = “blue”;

$.fn.hint.fontStyle = “normal”;

And each call will use these properties unless override through the option parameters.