keypressはブラウザによって反応するキーが違う

今回もアクセシビリティ対応で判明したのですが、jQueryのkeypressメソッドの判定がブラウザによって違うことがわかりました。

今回、アクセシビリティの改修を行うために調査したサイトで、よく見るフォントサイズを切り替えるボタンをjQueryのkeypressで実装していました。ところがこの動きがあまりよろしくなかったんです。

以下がそのサンプルです。(jQuery部分)

 サンプルを別ウィンドウで見る

上記サンプルの場合、font_s(小)、font_m(中)、font_l(大)のボタンの上で何かキーを押されると反応してフォントサイズが変わります。キーが特定されていないことですでにアクセシビリティに対応していないのですが、問題はFirefoxで起こりました。
キーボードのみで操作する場合、リンクの移動はTabキーで行いますが、FirefoxはこのTabキーの操作をkeypressで拾ってしまうんです。
例えば小ボタンにいるときにTabキーを押すとボタンは中に移動するが、サイトのフォントは小に切り替わってしまいます。IEやChromeではこの現象を確認できなかったので、現象はmozilla系のブラウザで起こるのではないかと考えています。

この現象をサンプルコードで解消するにはkeypressが反応するキーを限定する必要があります。例えばEnterキーのみに反応するようにするには以下のようにします。

 

すみません、もっとシンプルなコードがあると思うんですが…。
13はEnterキーのキーコードです。ifでこのキーコードを受け取った時だけフォントサイズを切り替えています。

IE、Chrome、Firefoxでいろいろとキーを押してみたのですが、ブラウザによって反応が違います。文字と関係ないキー、Fn(ファンクション)やCtrlなどの制御キーは反応が異なるので注意が必要ですね。と言うかフォントサイズを切り替えるのにkeypressを使うな! ってことでしょうか。

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。

  • このエントリーをはてなブックマークに追加
  • Pocket   
  • 5 follow us in feedly
comments powered by Disqus