桜ヶ丘日記

技術メモとかとか

入力プロンプトを表示するjQueryプラグインを書いたよ

Web JavaScript jQuery tips

以前書いた記事「「JavaScript の不思議な面白さ」を再実装してみたよ。」はprototype.jsで書いてみましたが、jQueryを使う機会が最近多いのでjQueryプラグインとして再実装してみました。

place holderとかinput prompt言うらしい。

jquery.inputPrompt.js

js/jquery.inputPrompt.js としてこれを設置します。

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

(function($) {
  $.fn.inputPrompt = function(){
    var argv = arguments.length ? arguments[0] : {};
    var colorPrompt = (colorPrompt in argv) ? argv.colorPrompt : '#aaaaaa';  // prompt color
    return this.each(function(){
      var e = $(this);
      var colorDefault = e.css('color');
      if(e.val() == '' || e.val() == e.attr('title')){
        e.val(e.attr('title')).css({"color" : colorPrompt})
      }
      e.blur(function(){
          if(e.val() == '' || e.val() == e.attr('title')){
            e.val(e.attr("title")).css({"color" : colorPrompt});
          }
        })
        .focus(function(){
          if(e.val() == e.attr('title')){
            e.val('').css({"color" : colorDefault});
          }
        })
        .parents("form").submit(function(){
          if(e.val() == '' || e.val() == e.attr('title')){
            e.val('').css({"color" : colorDefault});
          }
        })
      ;
    });
  }
})(jQuery);

利用例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.inputPrompt.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  $('.inputPrompt').inputPrompt();
  $('.inputPrompt-red').inputPrompt({
    colorPrompt : '#ff0000'  // プロンプトの色を指定できます
  });
});
//]]>
</script>
<title>jquery.inputPrompt.js利用例</title>
</head>
<body>
<form action="./">
  <p>
    <input type="text" name="test1" class="inputPrompt-red" title="名前を入力" /><br />
    <input type="text" name="test2" class="inputPrompt" title="URLを入力" /><br />
    <textarea name="test3" class="inputPrompt" title="コメント入力" rows="5" cols="50"></textarea><br />
    <input type="submit" value="送信" />
  </p>
</form>
</body>
</html>

スクショ

f:id:sakuragaoka:20100408184158p:image

いちおう

ライセンスはjQueryに準じます。自由に使ってください。
（または他のオープンソースライセンスを自由に適用してください）

追記

id:scientreさんが改良版を書かれてます。
http://d.hatena.ne.jp/scientre/20100419/jquery_input_prompt
.css()で色を直接制御する方式でなく、classを付加したり削除したりしてプロンプトの文字スタイルを切り替えることが出来るようになってます。

なにそれスマート！