SafariのkeyCodeで取得できるコードには要注意 #JavaScript

HTMLとJavascriptで電卓を作るため、テキストボックスにカーソルがある状態で'+','-','Enter','ESC'キーを押したら電卓の'足し算','引き算','＝','AC'に相当する処理が行われるようチャレンジしました。

タイプしたキー	電卓での機能
+	+
-	-
Enter	=
ESC	AC

ところが、以下のコードで押されたキーを判定して処理しようとしたものの、Chromeでは動くのにSafariではテキストボックスに'+','-'が入力されるだけという状態になりました。

calculator.js

$(document).on('keydown', '#InputNumber', function(e) {
  switch (e.keyCode) {
    case 107:
    case 187:
      $('#add').click(); #足し算の処理を実施
      break;
    case 109:
    case 189:
      $('#minus').click(); #引き算の処理を実施
      break;
    (以下省略)
    }
  });

デバッグする過程で、どうもe.keyCodeに格納されるコードが怪しいと考えて、以下のコードでe.keyCodeに格納される値を確認したところ、次の表の結果になりました。
（Sarafiはテキストボックスにカーソルがあるか否かで結果が変わりますが、Chromeは同じです。）

debug.js

window.addEventListener("keydown", function(e) {
  return window.alert(e.keyCode);
});

	+ (テンキー)	- (テンキー)	+ (キーボード)	- (キーボード)	Enter	ESC
Chrome	107	109	187	189	13	27
Safari (テキストボックス内)	229	229	229	229	13	27
Safari (テキストボックス外)	107	109	187	189	13	27

結果は、Safariでは、テキストボックスにカーソルがあると'+'と'-'のどちらを押してもe.keyCodeの値が同じになるということがわかりました。さらに、Safariでテキストボックスにカーソルがある状態でテンキーまたはキーボードから数字を入力すると、0〜9のいずれの数字を入力してもe.keyCodeに格納される値は229になります。つまり、Safariでテキストボックスにカーソルがある状態で数字関係のキーを押した場合、e.keyCodeの値でどのキーが押されたかを判断することはできません。
テキストボックスにカーソルが無ければ、Safariで0〜9を入力した際にe.keyCodeに格納される値は、キーボードの場合は48〜57に、テンキーの場合は96〜105になりますので、e.keyCodeで押されたキーを判断できます。

以上、長々と書いてきましたが、Javascriptを使ってキーボードのイベントを取得する際は、ブラウザ間の違いに注意する必要があるということが身に染みて分かりましたので、備忘録代わりに記事にしました。