2005-08-19 (Fri)

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