日本製外付けテンキーによるJSキーボードイベントの調査 #JavaScript

これは何？

外付けテンキーで全角数値を入力した時に、Chrome の JavaScript のイベントハンドラがどのように発火するのかのログを記録する。
また、対比用にノートパソコンの内臓キーボードでの実行結果も記録する。

対象となる操作

コチラに作成した CodePen ページで、以下の操作を行う。

input 要素をクリックしてフォーカスする
全角モード、もしくはかなモードに切り替える、この際のログは削除する
キーボードもしくはテンキーの 1 を入力
キーボードもしくはテンキーの 2 を入力
キーボードもしくはテンキーの 3 を入力
テンキーの場合は、00 を入力
キーボードもしくはテンキーの Enter を入力
input 要素以外をクリックしてフォーカスを外す

全角入力を調査対象にしたのは、外付けテンキーを使うような状況としてPCで会計・経理業務を行うことが考えられるが、その際には数値入力も全角のまま行うことが多いからである。（知見ある方に聞いた）

環境詳細

OS）
- Win = ThinkPad - Windows 7 Professional
- Mac = MacBook Pro - Yosemite

ブラウザ）
Chrome のバージョン 56.0.2924.87

外付けテンキー）
- BUFFALO = BSTK02 http://buffalo.jp/product/input/numeric/bstk02/
- ELECOM = TK-TCM010SV http://www2.elecom.co.jp/search/photo/search.asp?jancd=4953103266988
- SANWA = NT-18UBK https://www.sanwa.co.jp/product/syohin.asp?code=NT-18UBK

テンキーやOSの選定理由は特に無く、会社にあったからです。

実行結果のログ

Win - 内臓キーボード

keydown: Object {value: "", keyCode: 229}
keyup: Object {value: "１", keyCode: 49}
keydown: Object {value: "１", keyCode: 229}
keyup: Object {value: "１２", keyCode: 50}
keydown: Object {value: "１２", keyCode: 229}
keyup: Object {value: "１２３", keyCode: 51}
keydown: Object {value: "１２３", keyCode: 229}
change: Object {value: "１２３", keyCode: undefined}

Win - BUFFALO

keydown: Object {value: "", keyCode: 229}
keyup: Object {value: "１", keyCode: 97}
keydown: Object {value: "１", keyCode: 229}
keyup: Object {value: "１２", keyCode: 98}
keydown: Object {value: "１２", keyCode: 229}
keyup: Object {value: "１２３", keyCode: 99}
keydown: Object {value: "１２３", keyCode: 229}
keyup: Object {value: "１２３０", keyCode: 96}
keydown: Object {value: "１２３０", keyCode: 229}
keyup: Object {value: "１２３００", keyCode: 96}
keydown: Object {value: "１２３００", keyCode: 229}
change: Object {value: "１２３００", keyCode: undefined}

Win - ELECOM

Win - BUFFALO と同じ

Win - SANWA

Win - BUFFALO と同じ

Mac - 内臓キーボード

keydown: Object {value: "", keyCode: 229}
keyup: Object {value: "１", keyCode: 49}
keydown: Object {value: "１", keyCode: 229}
keyup: Object {value: "１２", keyCode: 50}
keydown: Object {value: "１２", keyCode: 229}
keyup: Object {value: "１２３", keyCode: 51}
keydown: Object {value: "１２３", keyCode: 229}
keyup: Object {value: "１２３", keyCode: 13}
change: Object {value: "１２３", keyCode: undefined}

Mac - BUFFALO

keydown: Object {value: "", keyCode: 12}
keyup: Object {value: "", keyCode: 12}
keydown: Object {value: "", keyCode: 229}
keyup: Object {value: "1", keyCode: 49}
keydown: Object {value: "1", keyCode: 229}
keyup: Object {value: "1", keyCode: 12}
keydown: Object {value: "1", keyCode: 229}
keyup: Object {value: "1", keyCode: 12}
keydown: Object {value: "1", keyCode: 229}
keyup: Object {value: "12", keyCode: 50}
keydown: Object {value: "12", keyCode: 229}
keyup: Object {value: "12", keyCode: 12}
keydown: Object {value: "12", keyCode: 229}
keyup: Object {value: "12", keyCode: 12}
keydown: Object {value: "12", keyCode: 229}
keyup: Object {value: "123", keyCode: 51}
keydown: Object {value: "123", keyCode: 229}
keyup: Object {value: "123", keyCode: 12}
keydown: Object {value: "123", keyCode: 229}
keyup: Object {value: "123", keyCode: 12}
keydown: Object {value: "123", keyCode: 229}
keyup: Object {value: "1230", keyCode: 48}
keydown: Object {value: "1230", keyCode: 229}
keyup: Object {value: "12300", keyCode: 48}
keydown: Object {value: "12300", keyCode: 229}
keyup: Object {value: "12300", keyCode: 12}
keydown: Object {value: "12300", keyCode: 229}
keyup: Object {value: "12300", keyCode: 13}
change: Object {value: "12300", keyCode: undefined}

Mac - ELECOM

keydown: Object {value: "", keyCode: 12}
keyup: Object {value: "", keyCode: 12}
keydown: Object {value: "", keyCode: 229}
keyup: Object {value: "1", keyCode: 49}
keydown: Object {value: "1", keyCode: 229}
keyup: Object {value: "1", keyCode: 12}
keydown: Object {value: "1", keyCode: 229}
keyup: Object {value: "1", keyCode: 12}
keydown: Object {value: "1", keyCode: 229}
keyup: Object {value: "12", keyCode: 50}
keydown: Object {value: "12", keyCode: 229}
keyup: Object {value: "12", keyCode: 12}
keydown: Object {value: "12", keyCode: 229}
keyup: Object {value: "12", keyCode: 12}
keydown: Object {value: "12", keyCode: 229}
keyup: Object {value: "123", keyCode: 51}
keydown: Object {value: "123", keyCode: 229}
keyup: Object {value: "123", keyCode: 12}
keydown: Object {value: "123", keyCode: 229}
keyup: Object {value: "123", keyCode: 12}
keydown: Object {value: "123", keyCode: 229}
keyup: Object {value: "1230", keyCode: 48}
keydown: Object {value: "1230", keyCode: 229}
keyup: Object {value: "12300", keyCode: 48}
keydown: Object {value: "12300", keyCode: 229}
keyup: Object {value: "12300", keyCode: 12}
keydown: Object {value: "12300", keyCode: 229}
keyup: Object {value: "12300", keyCode: 12}
keydown: Object {value: "12300", keyCode: 229}
keyup: Object {value: "12300", keyCode: 13}
keydown: Object {value: "12300", keyCode: 12}
keyup: Object {value: "12300", keyCode: 12}
change: Object {value: "12300", keyCode: undefined}

Mac - SANWA

Mac - BUFFALO と同じ

気付いたこと

あくまでこの結果だけからの、主観としての気付きメモ。

keypress は、全角モードだと発火しない
keydown と keyup の発火回数は様々である
Mac は都度都度タブ文字（keyCode=12）が発火されている
Win の場合は、同じ数値でもキーボードとテンキーで keyCode が異なる、Mac の場合は同じ
テンキーの 00 キー入力は、どの環境でも 0 キー入力の keydown / keyup を 2 度繰り返す挙動にマッピングされる
Win 内なら外付けキーボードの動作は同じ、Mac 内でも ELECOM が何か間違っちゃったんじゃないかな？と思いたい。
変換確定時の Enter キー入力は、Mac では keyCode=13 を送信するが Win ではしない
- 追加で調べた所、半角英語入力状態での Enter キー入力は、すべての環境で同じ keyCode=13 を送信する挙動になった

疑問

0 と 00 のあるテンキーの規格が見つからなかった。