2005-11-16 (Wed)

■ フォームに入力を促すメッセージを出力する JavaScript

input type="text" なフォームに最初から「ここに入力して下さい」みたいなメッセージを薄い色で表示させておいて入力を促すようなのありますよね。なんか、あれを、現実逃避気味に書いたので。

function inputDefault(elm, msg) {
   this.elm     = elm;
   this.msg     = msg;
   this.color   = '#999999';
   this.bgColor = '#F9FFF9';
}

inputDefault.prototype.set = function() {
   this._cleared    = false;
   this._defColor   = this.elm.style.color;
   this._defBGColor = this.elm.style.backgroundColor;

   this.elm.value        = this.msg;
   this.elm.style.color  = this.color;
   this.elm.style.backgroundColor = this.bgColor;

   var _this = this;
   addEvent( this.elm,      'focus',  function() { _this.clear();  } );
   addEvent( this.elm.form, 'submit', function() { _this.submit(); } );
}

inputDefault.prototype.clear = function() {
   if(this._cleared) return;

   this.elm.style.color            = this._defColor;
   this.elm.style.backgroundColor  = this._defBGColor;
   this.elm.value = '';
   this._cleared  = true;
}

inputDefault.prototype.submit = function() {
   if(this._cleared) return;

   var _this = this;
   this.elm.disabled = true;
   window.setTimeout(function() { _this.elm.disabled = false; }, 1);
}


function addEvent(elm, type, event) {
   if(elm.addEventListener) {
      elm.addEventListener(type, event, false);
   } else if(elm.attachEvent) {
      elm.attachEvent('on'+type, event);
   } else {
      elm['on'+type] = event;
   }
}

えっと。

var input = new inputDefault(form, 'hogehoge');
input.set();

なんてやれば動くはずです。form の部分は document.form.hoge とかなんか適当に。サンプルも用意してみたのでわかんない人はこっち見て。

• 動作サンプル

手軽に出来るので結構便利かもわからない。

ここまで書いて気が付いたのだけど、submit する時に「ここに入力して下さい」って文字列が送信されちゃうじゃん(今更かよ!)。onsubmit の時に clear を実行したりするように変更せねば…。

追記: onsubmit の時に一瞬だけ disabled にしてデータを送らないようにしてみた。

Posted by Kyosuke Takayama at 2005-11-16 (Wed) 19:58