jQuery日本語リファレンス

非フォーカス時にヒントの表示されるテキストボックス

フォーカスが当たっていない時に、入力域にヒントが表示されるテキストボックスを作るのは、意外とやっかいです。

[HTML]

<input type="text" id="text" name="text" value="" title="ヌヌヌー" />

[JavaScript]

$(document).ready(function(){
  $('#text')
    .blur(function(){
      var $$=$(this);
      if($$.val()=='' || $$.val()==$$.attr('title')){
        $$.css('color', '#999')
          .val($$.attr('title'));
      }
    })
    .focus(function(){
      var $$=$(this);
      if($$.val()==$$.attr('title')){
        $(this).css('color', '#000')
               .val('');
      }
    })
    .parents('form:first').submit(function(){
      var $$=$('#text');
      if($$.val()==$$.attr('title')){
        $$.triggerHandler('focus');
      }
    }).end()
    .blur();
  });

少し解説します。

ヒントは、今回はinput要素のtitle属性に設定するようにしました。
フォーカスが外れた際(blur)に、テキストが空もしくはヒントと同じであれば、文字色をグレーにしてヒントを設定します。
逆にフォーカスが当たった場合には、値がヒントであれば入力域を空にして文字色を黒くします。
この際の文字色などをサンプルでは直接指定してしまっていますが、実際はクラスを作成してaddClass/removeClassするのが良いでしょう。

この時に注意しなければならないのが、送信時(フォームがsubmitされた時)です。
そのままでいると、テキストのヒントがそのまま送信されてしまいますし、入力チェックも難しくなってくるでしょう。
そこで、親フォームを探してsubmit時にフォーカス取得時と同様の処理をしてやるようにしました。
これによって未入力状態(非フォーカス時にヒントが入っている状態)であれば、valの値も空になるようになります。

但しこの方法でも完全ではなく、例えばsubmit以外のタイミングでvalidationが行われたり、テキストの値をajax通信するなどの処理を行えば、自力でvalの値を制御してやらなければなりません。
実のところ、ヒントの書かれた画像を用意して背景に当ててやる形の方が、色々と面倒が無くて良いかもしれません。
(これも、文字サイズの変更やフォントの違いなどを許容する必要はありますが)

  $('#text2')
    .blur(function(){
      var $$=$(this);
      if($$.val()==''){
        $$.css('background-image', 'url(/jquery/images/text-hint.png)')
          .css('background-repeat', 'no-repeat');
      }
    })
    .focus(function(){
      var $$=$(this);
      if($$.val()==''){
        $$.css('background-image', 'none');
      }
    })
    .blur();