テキストフィールドのフォーカス時に背景色を変更する JavaScript (original) (raw)

■ テキストフィールドのフォーカス時に背景色を変更する 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