JavaScriptでプレースホルダつき入力欄を作る(JQuery実装)

JavaScript でプレースホルダつき入力欄を作る - blog.8-p.info

これは素晴らしい。
JQuery版もあったらいいなー。と思ったので作りました。

ダウンロード

使い方

こんな感じです。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="jquery.placeholder.js"></script> 
<script type="text/javascript">
// <![CDATA[ 
$(document).ready(function(){
  $('#search').placeholder('検索したい単語を入れてね♪');
});
// ]]>
</script>

あとプレースホルダのスタイルを指定できるようにしたよ。

  $('#search').placeholder({
    word: '検索したい単語を入れてね♪',
    styleClass: 'myClass'
  });

動作サンプル

http://syttru.0web.cjb.net/placeholder/

ソースコード

jQuery.fn.placeholder = function(opts){
  
  if(typeof opts == 'string') {
    opts = {word:opts};
  }
  opts = jQuery.extend({
      word: '',
      styleClass: 'placeholder'
    },opts);
  
  return this.each( function() {
    var target = $(this);
    
    target.blur(
      function(){
        if(changed()) return;
        target.val(opts.word);
        target.addClass(opts.styleClass);
      }
    ).focus(
      function(){
        if(changed()) return;
        target.val('');
        target.removeClass(opts.styleClass);
      }
    ).blur();
    
    function changed() {
      if(target.val() == ''){
        return false;
      }else if(target.val() == opts.word && target.hasClass(opts.styleClass)){
        return false;
      }
      return true;
    }
  });
};

感想

prototype.jsを使った引用元のコードと比べてオブジェクト感がゼロなのに絶望した。
JQeuryは方言がすごい。慣れたら楽しいけど読み方を知らないと意味が分かりにくいなあ。

追記

うわあああぁぁぁーーー！！
いま気づいたけど、よく考えたらコレ何も入力しないままsubmitしたら「検索したい単語を入力してね♪」がpostされてしまうじゃないかー
引用元のonunloadイベントはそういうことだったのか。
これはいかん。でももう眠いから明日考えよう。