Web フォームの画像ボタンをキーボードで submit した場合

Posted by
ぴろり
Posted at
2007/06/29 02:46
Trackbacks
関連記事 (1)
Comments
コメント (2)
Post Comment
コメントできます
Category
開発メモ カテゴリ
[pc][spam]Javascriptを利用したコメントスパム対策
submitボタンを画像にして、画像上のどこを押されたのか位置情報を得る、というのも手軽に出来るし、javascriptなしでいけるためいいなと思うのだけど、これってTabキーとEnterでsubmit押したときにも誤認識されずにいけるのだろうか?

 …どうなんでしょう? というわけで実験してみました。

このエントリーをはてなブックマークに追加  

目次

  1. 実験
  2. 結果

実験

 簡単なWebフォームを用意して送信されるデータを確認してみました。submit操作には画像ボタン(<input type="image">)を使用します。画像をマウスクリックすると、送信データにはマウスクリックされた位置情報が含まれますが、フォームの送信をキーボードショートカットで行なった場合にどうなるのかということです。

case 1

画像ボタンをマウスクリックするか、Tabキーでフォーカスを移してEnterキーでsubmitするか、アクセスキー(Alt+I)でsubmitできます。

case 2

画像の指定が間違っていて、画像ボタンが表示されていない場合

case 3

JavaScriptを使用してフォームをsubmitする場合

結果

(btn.xbtn.y)
Firefox 1.5IE 6.0Netscape 7.1Opera 9.1
case1.Enterキーを押下してsubmit (0,0)
case1.アクセスキーでsubmit (0,0) accesskey の指定は無効?
case2.ALTテキストをマウスクリック クリックされた箇所によらず空文字 クリックされた座標を返す 送信されるデータにパラメータが含まれない クリックされた座標を返す
case2.Enterキーを押下してsubmit 空文字 (0,0) 送信されるデータにパラメータが含まれない (0,0)
case2.アクセスキーでsubmit 無反応でsubmitできない (0,0) 無反応でsubmitできない accesskey の指定は無効?
case3.JavaScriptでフォームを送信する 送信されるデータにパラメータが含まれない
※いずれもWindows XP Professionalで実験

 case1.とcase3.では各ブラウザで動作にそれほど大きな差はありませんが、case2.の指定された画像ファイルが見つからない場合ではそれぞれ動作が異なるようです。また、キーボードでsubmitする場合でも、以前にマウスクリックでsubmitしていた場合、その値を記憶して(?)しまうようです(Firefox1.5で確認)

このエントリーをはてなブックマークに追加  



関連記事/トラックバック (全 1 件中、最新 5 件まで表示しています)

モーグルとカバとパウダーの日記 のスクリーンショット
タイトル
[pc][spam]Javascriptを利用したコメントスパム対策
Trackbacked at
2007/06/29 09:48
from
モーグルとカバとパウダーの日記
概要
MT-Keystrokes というMT用プラグイン - モーグルとカバとパウダーの日記 こちらのコメントで教えていただいた、MT-Keystrokesと...

この記事にトラックバックを送るには?

寄せられたコメント (全 2 件中、最新 5 件まで表示しています)

Posted by
memmem
at
2009/11/07 06:53
ID
lG4YbMlM
はじめまして。
operaのアクセスキーは、Shift+Escのあとに、指定されたキーを
押します。
Posted by
stealthinustealthinu
at
2007/06/29 09:33
ID
h9B3D1Qg
自分も実験して試してみなくちゃ、と思ってたんですが、まだやってなかったので参考になりました。
マウスでクリックしなくても送られてくるのですね。これは使えそうです。
あとは、携帯から書き込まれる場合も送られるのかどうか、確認したいところです。
もし携帯からは送られないのだとしても、IP調べて携帯だったらこのフィルタは無視
ということで対応できると考えてます。

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。