■ フォームに入力を促すメッセージを出力する 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 printable version
1) kuippa (2005-11-17 (Thu) 21:58)
はじめまして。動作サンプルみました。使い心地とか、汎用性高そうですね。
このソースを転用して再配布性を持つwebアプリに組み込んでもよろしいですか？