■ テキストフィールドのフォーカス時に背景色を変更する JavaScript
以下の JavaScript を読み込ませれば、フォームのテキストフィールドにフォーカスした時に、背景に色がつくようになります。今どのフィールドを選択しているのかが視覚的にわかるので便利。
mixi にこの機能がついていたんだけど、onfocus なんてのをいっぱい書いていて非効率的だと思ったので、読み込ませるだけで勝手に全部のフィールドに設定されるようなものを書いてみました。
window.onload = function() {
var colorful = new ColorfulInput;
colorful.set();
}
function ColorfulInput() {
this.skip = [];
this.color = { 'blur': '', 'focus': '#EEEEEE' };
this.set = function() {
for (var i = 0; i < document.forms.length; i++) {
for (var f = 0; f < document.forms[i].length; f++) {
var elm = document.forms[i][f];
if(!this._checkSkip(elm)) continue;
this._setColor(elm, 'focus');
this._setColor(elm, 'blur');
}
}
}
this._checkSkip = function(elm) {
for(var i in this.skip) {
if(elm.type == this.skip[i]) return false;
}
return true;
}
this._setColor = function(elm, type) {
var color = this.color[type];
var event = function() { elm.style.backgroundColor = color; };
if(elm.addEventListener) {
elm.addEventListener(type, event, false);
} else if(elm.attachEvent) {
elm.attachEvent('on'+type, event);
} else {
elm['on'+type] = event;
}
}
}
もっと違う色を使いたかったら、new の後に colorful.color['focus'] = 'hoge' とかすると良いです。colorful.skip = ['submit', 'textarea'] なんて言う風にすると、submit ボタンと textarea には色がつかなくなります。
わけわかんないと思うので、動作サンプル と、そこで使っている colorful.js を見てみて下さい。
onsubmit で disable にするやつ もそうだけど、こうやって作ってると導入も取り外しも簡単だから楽で良いね〜。
* 更新履歴
- 2006-07-19 - MacIE に対応
Posted by Kyosuke Takayama at 2005-08-19 (Fri) 21:11 printable version
1) fumika (2005-11-07 (Mon) 09:26)
素晴らしいスクリプトですね。参考にさせていただきます。
body の onload に別の処理を書いていると、colorful.set()を
呼び出さないといけないというのに気づかずハマりました。