zudolab jqAutoHideGuideText

基本セットアップ例

1. jQuery、"jqAutoHideGuideText.js" を読み込みます。

2. 下記例のように、input要素（もしくはtextarea要素）と、ガイドテキストを指定します。

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

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

   input要素に何も入力されておらず、フォーカスが当たっていない状態の間（以降、ガイドモードと呼びます）のみ、valueにガイドテキストが指定されます。
   この時、class "guideMode"がその要素に付加されます。
   フォーカスが外れると、このclass指定は取り除かれます。

空サブミット回避機能

フォーム要素の指定を追加することで、
ガイドモードになっているときの空サブミットを防止できます。

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>

例えば、ガイドテキストに"search word"と指定した場合、
何も入力されていない状態でフォームがサブミットされると、
"search word"というクエリが送信されてしまいます。
上記例だと、http://example.com は、query="search word"を受け取るはずです。
フォーム要素の指定を追加すると、このようなサブミットを防止できます。