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

  • 0
    いいね
  • 0
    コメント

    これは何?

    外付けテンキーで全角数値を入力した時に、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 のあるテンキーの規格が見つからなかった。