zudolab jqAutoHideGuideText

Simple usage

1. Load jQuery and jqAutoHideGuideText.js

2. Specify the target input(or textarea) element and the guide text like following.

   new AutoHideGuideText({
       input: "#query",
       guideText: "search word"
   });

   <input type="text" size="30" id="query" />

   This will set the specified guide text while the input element is not focused.
   Class attribute "guideMode" will be added while the input element is not focused.

Avoid submitting feature

You can specify the form element to avoid submitting while the element was in the guideMode.
This can avoid the user to submit the guide text value.
If the user didnot input anything in the form and push the submit button, http://example.com will receive query="search word" without this.

new AutoHideGuideText({
    input: "#query",
    form: "#searchForm",
    guideText: "search word"
});

<form method="get" action="http://example.com/" id="searchForm">
    <input type="text" size="30" name="query" id="query" />
    <input type="submit" value="search" />
</form>