鷹の島

▼ 2005年08月の記事一覧

onsubmit で disable にするやつ / スパム対策(2) / そういえば / onsubmit => ボタン disable の機能追加とか / テキストフィールドのフォーカス時に背景色を変更する JavaScript /

■ onsubmit で disable にするやつ

• onsubmit で submit ボタンを disable にしてユーザビリティを良くする

フォームを送信した時に、submit ボタンを disabled にして二重送信を防ぎましょう、というのがナウなヤングにバカウケ？

そんでもって、ここに書いてあるやつ なら、そこの JavaScript を読み込ませるだけで、自動的に全てのフォームに対して設定が行なわれるので便利。中止ボタン対策もしてあってグッド。

ただ、Deer Park な Firefox で試した所、戻るボタンで戻った場合は disabled が解除されないし、中止ボタンでの復活も効かない様子。

なので、書き直してみました。

var DisableSubmit = {
   init: function() {
      this.addEvent(window, 'load', this.set());
   },

   set: function() {
      var self = this;
      return function() {
         for (var i = 0; i < document.forms.length; ++i) {
            if(document.forms[i].onsubmit) continue;
            document.forms[i].onsubmit = function() {
               self.setDisable(this.getElementsByTagName('input'));
            };
         }
      }
   },

   setDisable: function(elms) {
      for (var i = 0, elm; elm = elms[i]; i++) {
         if ((elm.type == 'submit' || elm.type == 'image') && !elm.disabled) {
            Set(elm);
            unSet(elm);
         }
      }

      function Set(button) {
         window.setTimeout(function() { button.disabled = true; }, 1);
      }
      function unSet(button) {
         window.setTimeout(function() { button.disabled = false; }, 1000);
      }
   },

   addEvent: function(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;
      }
   }
}

DisableSubmit.init();

普通に読み込んでもらえれば、勝手に機能が追加されます。

あとは、 submit のパラメータを hidden に指定する 機能を入れればかなり良さそうかな？導入した。

disabled にして欲しくないフォームへの対応も欲しいかなー。

* 2006-07-08 追記

miau's blog? で指摘されていた通り、type='image' で動作しないのと、window.onload を上書きしている問題があったため、そのままコピペして使っても問題が生じる場合があったので、この問題の修正を行ないました。

特に onload に関しては DisableSubmit の中に組み込んでおいたので、今後は本当にそのままコピペしても何も気にせず使えるようになりました。

* 更新履歴

• 2005-08-10 - 少しだけシンプルにしました。
• 2005-08-16 - submit フォームの値も送信出来るように。
• 2006-07-08 - Asarimaさん の指摘通りの修正。type='image' も動作するように。window.onload を上書きしないように

△トップ | コメント (11) | トラックバック(2)

■ スパム対策(2)

最近、毎日コメントスパムがくる。

ベイジアンフィルタを導入してある ので、ちゃんと弾いてくれるのだけど、毎日同じものが投稿されるのはかなり欝陶しいので、コメント欄に http:// を含むものは全部弾く事にしてみた。

lib/MT/App/Comments.pm の $app->handle_error($app->translate("Comment text is required.")); とかなんとか書いてある所の下あたりに書き加えればOKっぽい。

if(($q->param('text')) =~ /http:\/\//) {
   return $app->handle_error('コメントスパム対策のため、http:// を含むコメントは投稿出来ません。');
}

面倒くさいので、エラーメッセージは日本語決め打ちで。多分 UTF-8 で保存しないと文字化けします。

△トップ | コメント (0) | トラックバック(0)

■ そういえば

前に 夢で wema っぽい便利そうなシステムを見たんだけどさ、誰か作ってよ って書きましたが、こどもてれびのけいじばん と言うのがあるようです。あるようです、と言うか最近作られたようですが…。

ホイールの挙動がちょっと違うけど、まさに夢で見たものっぽいです、すごいです、感動した。TODO 管理とかに便利そうな予感。まだダウンロード出来ないようですが、調整中みたいなので期待して待っていましょう。

△トップ | コメント (0) | トラックバック(0)

■ onsubmit => ボタン disable の機能追加とか

onsubmit で disable にするやつ ですが、submit のパラメータが送信出来る機能が必要になったので、この機能を導入したものに代えました。

submit ボタン disable 技の罠のコメント欄 に書いてある方法がシンプルに導入出来そうだったので、このアイディアをパクってきました。

△トップ | コメント (0) | トラックバック(0)

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

△トップ | コメント (10) | トラックバック(3)