Mac / Winのブラウザにおけるkeydownの処理の違い

Tomoumi Nishimura 71views 更新:2016年11月17日

MacのChromeとWinのChromeでどうもkeydownの動作が違うようなので、検索してみたところ、以下のような記事に到達しました。

JavaScriptのキーイベント・キーを押し続けた場合のブラウザ毎のイベント差異 ( しゃいん☆のブログ| 名古屋市 Webシステム開発 サーバ構築 ネットワーク構築 株式会社コネクティボ )

記事が古いのでいくつか検証してみます。

検証項目

keydownを押下し続けた場合のイベント発火の差。 キーとしてはシステムキーとして⌘, Ctrlキー、通常の文字キーとしてa、後は矢印キーとしてキーを選びました。

検証対象

WinとMacの代表的なブラウザで手元ですぐ操作できたもの。具体的には次のもの。

  • Windows
    • Chrome
    • Internet Explorer
  • Mac
    • Safari
    • Chrome
    • FireFox

検証方法

以下のような簡易なHTMLページを作成してブラウザで開き、キーを押下し続けました。


<meta charset="utf-8"> <title>keydownのテスト</title> <p id="label"></p> <script> document.onkeydown = function(e) { var elem = document.getElementById("label"); if(elem.innerHTML == "") { elem.innerHTML = "aaa"; } else { elem.innerHTML = ""; } return false; }; </script>

結果

以下の表の通りになりました。

OS ブラウザ⌘ / Ctrla
WinChrome連続して発火連続して発火連続して発火
IE連続して発火連続して発火連続して発火
MacChrome一回のみ発火連続して発火連続して発火
Safari一回のみ発火連続して発火連続して発火
FireFox一回のみ発火連続して発火連続して発火

その他

ネイティブな処理をよくしらないのでなんとも言えませんが、以下の記述からしても、恐らくOSのkeydown処理の違いに由来するんでしょうね。

ウィンドウ上での keydown イベントに対応するイベントハンドラです。
window.onkeydown – Web API インターフェイス | MDN

参考

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません