inputにフォーカスすると消える文字をjQueryで実装する

06 Mar 2008
Technology

フォーカスすると消える文字（何も入力が無ければ初期値に戻す）を、jQueryだけで実装する方法を紹介します。

実装方法は凄く単純で、inputのvalueに予め文字列を入れておき、jQueryの設定ファイルに以下のコードを記述するだけです。

jQuery(function($) {
  var placeHolder = 'コメントを入力して下さい！';

  $('input[type="text"]')
    .focus(function() {
      var self = $(this);
      if (self.val() === placeHolder) { self.val(''); }
    })
    .blur(function() {
      var self = $(this);
      if (self.val() === "") { self.val(placeHolder); }
    });
});

input[type='text'] の部分は、CSSセレクタで指定して下さい。

尚、この実装の為だけにjQueryを使うのはあまりに不毛なので、あくまでも他でjQueryを使用してる際のおまけ程度に考えて頂ければと思います。