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

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のkeydown処理の違いに由来するんでしょうね。

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

参考

• JavaScriptのキーイベント・キーを押し続けた場合のブラウザ毎のイベント差異 ( しゃいん☆のブログ| 名古屋市 Webシステム開発 サーバ構築 ネットワーク構築 株式会社コネクティボ )
• window.onkeydown – Web API インターフェイス | MDN
• keydown、keypressイベントのブラウザ毎の挙動
• keydown、keypressイベントのブラウザ毎の挙動の違い – Enjoy*Study
• Events – keydown, keypress, keyup
• keydown_test.html