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

これは何?

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

対象となる操作

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

  1. input 要素をクリックしてフォーカスする
  2. 全角モード、もしくはかなモードに切り替える、この際のログは削除する
  3. キーボードもしくはテンキーの 1 を入力
  4. キーボードもしくはテンキーの 2 を入力
  5. キーボードもしくはテンキーの 3 を入力
  6. テンキーの場合は、00 を入力
  7. キーボードもしくはテンキーの Enter を入力
  8. 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: "1", keyCode: 49}
keydown: Object {value: "1", keyCode: 229}
keyup: Object {value: "12", keyCode: 50}
keydown: Object {value: "12", keyCode: 229}
keyup: Object {value: "123", keyCode: 51}
keydown: Object {value: "123", keyCode: 229}
change: Object {value: "123", keyCode: undefined}

Win - BUFFALO

keydown: Object {value: "", keyCode: 229}
keyup: Object {value: "1", keyCode: 97}
keydown: Object {value: "1", keyCode: 229}
keyup: Object {value: "12", keyCode: 98}
keydown: Object {value: "12", keyCode: 229}
keyup: Object {value: "123", keyCode: 99}
keydown: Object {value: "123", keyCode: 229}
keyup: Object {value: "1230", keyCode: 96}
keydown: Object {value: "1230", keyCode: 229}
keyup: Object {value: "12300", keyCode: 96}
keydown: Object {value: "12300", keyCode: 229}
change: Object {value: "12300", keyCode: undefined}

Win - ELECOM

Win - BUFFALO と同じ

Win - SANWA

Win - BUFFALO と同じ

Mac - 内臓キーボード

keydown: Object {value: "", keyCode: 229}
keyup: Object {value: "1", keyCode: 49}
keydown: Object {value: "1", keyCode: 229}
keyup: Object {value: "12", keyCode: 50}
keydown: Object {value: "12", keyCode: 229}
keyup: Object {value: "123", keyCode: 51}
keydown: Object {value: "123", keyCode: 229}
keyup: Object {value: "123", keyCode: 13}
change: Object {value: "123", 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 のあるテンキーの規格が見つからなかった。