IE8/9でもplaceholder実装するjQueryプラグイン

ついでにplaceholderが実装されてるブラウザでは元の挙動を活かすオプション付き。
（IEとChromeとFirefoxで挙動が違うのが嫌な場合も使えます）

簡単に解説すると、トリガーをつけた input 要素に placeholder 属性をつっこめば、title属性で代替して表示してくれるっていうやつです。
なにげにtitle属性でいけちゃうんですよ。でも色はデフォルトのinputの色で出ちゃうのでclassだけつけかえるのです。

##サンプル
http://codepen.io/blurblue/pen/QjNKyp

##オプション
###cover
IE9以下以外のブラウザでも有効にします。
true で有効。
false か未設定で無効。

###submitDisable:
空かplaceholder文言と同じだった場合に先祖のform要素のsubmitをキャンセルします。
true でキャンセル有効。
false か未設定でキャンセル無効。

##プラグイン

// placeholder
$.fn.jqPlaceholder = function(options){
  // property
  var defaults = {
        cover: false,
        submitDisable: false
      },
      settings = $.extend({}, defaults, options);

  var init = function(){
    var input = $(this),
        label = input.attr('placeholder'),
        onFocus = function(){
          if(input.val() == label) input.removeClass('blur').val('');
        },
        onBlur = function(){
          if(input.val() == '') input.addClass('blur').val(label);
        },
        onSubmit = function(){
          return false;
        };
    if(isltIE8 || isIE9 || settings.cover){
      input.removeAttr('placeholder');
      input.addClass('blur').val(label).attr('title', '');
      input.on('focus', onFocus);
      input.on('blur', onBlur);
    } else {
      input.attr({'placeholder': label, 'title': ''});
    }
    if(settings.submitDisable){
      if(label == input.val() || label == ''){
        input.closest('form').on('submit', onSubmit);
      }
    }
  };
  this.each(function(){
    init.apply(this);
  });
};

※"isltIE8" は IE8以前、"isIE9" は IE9 のUA判定です（中身はtrue or false）。適当に実装してください。

##実装コード
今回は "js-placeholder" をトリガー用classとしました。
***HTML

<p><input type="text" placeholder="placeholder用文言" class="js-placeholder"> オプションなし</p>

***CSS
非フォーカス時にグレーにするだけなので色は適宜。

input.blur {
  color: #999;
}

***JS

$('.js-placeholder').jqPlaceholder({
  cover: true,
  submitDisable: true
});

プラグインにした意味はあまりないので、メインの必要な部分だけ実装すればいいとおもう。