1. Qiita
  2. 投稿
  3. reactjs

Reactのキーボードイベントをクロスブラウザで確認する

  • 8
    いいね
  • 0
    コメント

React の onKeyDown / onKeyPress / onKeyUp / onChange の挙動が、クロスブラウザでどのように変わるのかを調査しました。

調査方法・内容

  • それらのイベントに event.key / event.keyCode / event.target.value の値を記録するハンドラを設定し、ひとつの <input type="text"/> に全イベントを付与する。
  • 下記の「キーボードの操作」をクロスOS/ブラウザ環境で行って、その履歴を保存する。

具体的には、CodePen に書いた簡単な自作ツール で行いました。

環境について

  • 使用したハードウェアは、日本語キーボードの Mac Book Pro です。
  • Win 仮想環境は VirtualBox で構築しており、また(参考記事が見つかりませんが) Mac のキーボードと連動する設定をした上で行っています。

キーボードの操作

  1. 「かな」を押す
  2. 「A」を押す
  3. 「K」を押す
  4. 「A」を押す
  5. 「スペース」を一度押して「赤」に変換する
  6. 「Enter」を押して変換を確定する

Mac/Chrome

Event name key keyCode target.value
onKeyDown a 229
onChange
onKeyUp a 65
onKeyDown k 229
onChange あk
onKeyUp k 75 あk
onKeyDown a 229 あk
onChange あか
onKeyUp a 65 あか
onKeyDown 229 あか
onChange
onKeyUp 32
onKeyDown Enter 229
onChange
onKeyUp Enter 13

Mac/Safari

Event name key keyCode target.value
onKeyUp Unidentified 0
onChange
onKeyDown Unidentified 229
onKeyUp Unidentified 65
onChange あk
onKeyDown Unidentified 229 あk
onKeyUp Unidentified 75 あk
onChange あか
onKeyDown Unidentified 229 あか
onKeyUp Unidentified 65 あか
onChange
onKeyDown Unidentified 229
onKeyUp 32
onChange
onKeyDown Unidentified 229
onKeyUp Enter 13

Mac/Firefox

Event name key keyCode target.value
onKeyUp KanjiMode 21
onKeyDown a 65
onChange
onChange あk
onChange あか
onChange
onChange
onKeyUp Enter 13
  • 大分少ないです。これは変換中のキー操作が一律フックできないためです。

仮想 Win8.1/IE11

Event name key keyCode target.value
onKeyUp Unidentified 243
onKeyDown a 229
onChange
onKeyDown k 229
onChange あk
onKeyDown a 229 あk
onChange あか
onKeyDown 229 あか
onChange
onKeyDown Enter 229
onKeyUp Enter 13
onKeyUp Enter 13
  • 変換確定時の onKeyUp で Enter が 2 回飛んでいます。
    • これは仮想環境であるが故なのだろうか・・・?

番外: document.querySelector('input').value = "a"

全環境で、onChange は反応しませんでした。

まとめ

頑張りたくない人は onChange だけで過ごした方が良い。

その他の参考サイト


折角なので、埋まってなかった React Advent Calendar 2016 の 12 日目を乗っ取ってみたんですが、意外と精神にくるのでやらなければ良かったと思ってます・・・。