テキストボックスに透かし文字を入れるJS

2009.11.27 金曜日

最近多い気がする。
テキストボックスが空の時に初期値で警告文とか入っていて、フォーカスすると消えるアレ。
textbox

ここんとこ出番が多かったのでjQueryのプラグインにしてみた。
未入力のままフォームがsubmitされると初期値が送信されちゃうので、親のformオブジェクトを探してsubmitの際に空にするようにしてみた。

サンプル

サンプル

使い方

<br />
$("#text01").setDefaultValue("値を入力してください");<br />
$("#text02").setDefaultValue("値を入力してください", "gray");<br />

第一引数に初期値になるメッセージ
第二引数にクラス名を入れると、初期値を表示している際に適用される。
グレー文字で出したいとか、背景を赤にしたいとかありそうだったので。

ソース

Download: textbox.js
  1. <br />
  2. (function($) {<br />
  3.     $.extend({<br />
  4.         textarea : new function(){<br />
  5.             var TA = this;<br />
  6.             TA.set = function(o, m, c){<br />
  7.                 if (Object.prototype.toString.call(m) != "[object String]")return false;<br />
  8.                 var parent;<br />
  9.                 var p = o.parents();<br />
  10.                 for(var i=0;i</p>
  11. <p.length;i++){<br />
  12.                     if (typeof p[i].elements != "undefined"){<br />
  13.                         $(p[i]).submit(function(){<br />
  14.                             if (o.val() == m){<br />
  15.                                 o.val('');<br />
  16.                             }<br />
  17.                         });<br />
  18.                         break;<br />
  19.                     }<br />
  20.                 }<br />
  21.                 if (o.val() == "" || o.val() == m){<br />
  22.                     o.val(m);<br />
  23.                     if (c) o.addClass(c);<br />
  24.                 }<br />
  25.                 o.focus(function(){<br />
  26.                     if (o.val() == m){<br />
  27.                         o.val('');<br />
  28.                         if (c) o.removeClass(c);<br />
  29.                     }<br />
  30.                 });<br />
  31.                 o.blur(function(){<br />
  32.                     if (o.val() == ""){<br />
  33.                         o.val(m);<br />
  34.                         if (c) o.addClass(c);<br />
  35.                     }<br />
  36.                 });<br />
  37.             }<br />
  38.         }<br />
  39.     });<br />
  40.     $.fn.extend({<br />
  41.         setDefaultValue: function(m, c){<br />
  42.             $.textarea.set($(this), m, c);<br />
  43.         }<br />
  44.     });<br />
  45. })(jQuery);<br />

タグ: | カテゴリー: Javascript | コメント(0) »

トラックバックURL

コメント