2011/02/23

テキストボックスのデフォルト値を付けたり／消したりする(jQuery)

以前、テキストボックスのデフォルト値を付けたり／消したりするというネタを書きましたが、実装が雑だった（イベントのバインド方法とか）ので、jQueryで書き直してみました。

demo :


以前に比べるとjQueryっぽいソースになった気がします。
（今回はフラグをみないで、ただバインド／アンバインドをしているので、ロジックは少し変わっています。）

こんな感じのHTMLを用意しておいて…

<input type="text" name="input2" id="input2" value="" />


こんな感じのスクリプトを書いてやります。

// jQuery版
var defaultMsg = "何か入れてください";
$(function() {
 $("#input2").val(defaultMsg)
  .focus(function() {
   ($(this).val() == defaultMsg) && $(this).css("css", "#000000").val("");
  })
  .blur(function() {
   ($(this).val() == "") && $(this).css("css", "#696969").val(defaultMsg); 
  })
});

やっぱりjQueryで書くとスッキリしますね！
Labels: ,