「JavaScript の不思議な面白さ」を再実装してみたよ。

追記: jQueryプラグイン版も書きました
　

JavaScript の不思議な面白さ (Yahoo! JAPAN Tech Blog)の実装方法もコードもアレなので自分なりに再実装してみた。

まずHTML

デフォルトで表示しておく説明文ってtitle属性そのものだと思ったわけです。説明文っていうかタイトルな気がするし。
で、書いたHTMLはこんだけ。ロジックは全部外部JavaScriptファイルに書きます。

<form>
    <input type="text" name="q" title="検索語を入力" class="add-default-text" />
    <input type="submit" value="検索" />
</form>

ちなみにYahoo! JAPAN Tech Blogさんでは、

<input (中略) description="ここで検索！">

なんて書いちゃってる。description属性？そんなのあったっけ？

JavaScriptコードを書く

汎用で使えるように「form-default-text.js」というファイルで別に置いておきます。

Event.observe(window, 'load', function(){
  $A(document.getElementsByTagName('form')).each(function(f){
    $A(document.getElementsByClassName('add-default-text'), f).each(function(e){
      setTxt(e, e.title);
      Event.observe(e, 'focus', function(){
        clearTxt(e, e.title);
      });
      Event.observe(e, 'blur', function(){
        setTxt(e, e.title);
      });
      Event.observe(f, 'submit', function(){
        clearTxt(e, e.title);
      });
    });
  });
});

function setTxt(e, txt){
  if(!e.value || e.value == txt){
    e.value = txt;
    e.style.color = '#999999';
  }
}

function clearTxt(e, txt){
  if(e.value == txt){
    e.value = '';
  }
  e.style.color = '#000000';
}

解説はあとで書くかも書かないかも。

あとは下記のタグをの中に入れておいてね。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="form-default-text.js"></script>

※ prototype.jsを使うのであらかじめ置いておいてください

※ 上記コードは任意のオープンソースライセンスで自由に利用してください