読者です 読者をやめる 読者になる 読者になる

入力プロンプトを表示するjQueryプラグインをちょこっと変えたよ

桜ヶ丘さん作のこのスクリプトJavaScriptで直接色を指定するのはちょっと嫌だったのでクラスを指定して、CSSでスタイルを指定できるようにしました。

引数に何も指定しないときは placeholder というクラスを付けます。

/*
 * jquery.inputPrompt.js
 * set default text to <input type="text" />
 * licensed under any open source license.
 * http://d.hatena.ne.jp/sakuragaoka/20100406
 * http://d.hatena.ne.jp/scientre/20100419/jquery_input_prompt
 */

(function($) {
  $.fn.inputPrompt = function(){
    var argv = arguments.length ? arguments[0] : {};
    var classPrompt = (classPrompt in argv) ? argv.classPrompt : 'placeholder';
    return this.each(function(){
      var e = $(this);
      if(e.val() == '' || e.val() == e.attr('title')){
        e.val(e.attr('title')).addClass(classPrompt);
      }
      e.blur(function(){
          if(e.val() == '' || e.val() == e.attr('title')){
            e.val(e.attr("title")).addClass(classPrompt);
          }
        })
        .focus(function(){
          if(e.val() == e.attr('title')){
            e.val('').removeClass(classPrompt);
          }
        })
        .parents("form").submit(function(){
          if(e.val() == '' || e.val() == e.attr('title')){
            e.val('').removeClass(classPrompt);
          }
        })
      ;
    });
  }
})(jQuery);