今押したキーは何?
どれかキーを押すと、event.key、event.code、旧式のkeyCodeが表示されます。たとえばAキーはkey "a"、code "KeyA"、keyCode 65で、Enterキーはcode "Enter"、keyCode 13です。
使い方
- ページのどこかを一度クリックしてから、キーボードのキーを押します。入力欄をクリックする必要はありません。
- パネルでキー名、物理コード、旧式のkeyCodeを確認します。Shift、Ctrl、Alt、Cmdを一緒に押すと修飾キーの状態が分かり、キーを押し続けるとリピート表示がオンになります。
- コピーボタンで値をコードに持ち帰れます。下の一覧には直近10回の入力が残ります。
計算方法
ブラウザはキーを押すたびにkeydownイベントを送ります。event.keyはキーが生み出す値("a"、"A"、"Enter"など)で、キー配列やShiftの状態で変わります。event.codeはキーボード上の物理的なキー("KeyA"など)で、配列が違っても同じなのでゲーム操作に向いています。
event.keyCodeは古い数値コードです。非推奨ですが、古いスクリプトやjQuery時代のコードで使われているため表示します。IMEで文字を変換している間は229になります。event.locationはキーの位置で、0が標準、1が左、2が右、3がテンキーです。
テスト中にページがスクロールしたりヘルプが開いたりしないよう、ほとんどのキーでブラウザの既定動作を止めます。Tab、Escape、F5、F11、F12とCtrlまたはCmdを使うショートカットはそのままです。Fn、音量、輝度などOSが処理するキーはページに届きません。
よくある質問
event.keyとevent.codeはどう違いますか?
event.keyはキーが入力する値なので、キー配列やShiftで変わります。event.codeは物理的な位置です。フランス語のAZERTY配列では、Qの位置のキーはcodeが"KeyQ"でkeyは"a"になります。ゲーム操作にはcode、文字に依存するショートカットにはkeyを使います。
keyCodeはまだ使っていいですか?
いいえ。keyCodeとwhichは非推奨です。新しいコードではevent.keyかevent.codeを使ってください。数値は古いスクリプトを読んだり直したりするために表示しています。たとえば13はEnter、27はEscape、32はSpaceです。
229や"Process"と出るのはなぜですか?
中国語、日本語、韓国語などの入力方式は、文字を変換している間キーを先に受け取るため、ブラウザは229を返します。素のキー値が必要なら英語配列に切り替えてください。
ショートカットやメディアキーが表示されないのはなぜですか?
OSやブラウザがページより先にキーを処理することがあります。Ctrl+W、Alt+Tab、Cmd+Q、多くのノートPCのFn列などです。ページが反応しなければ、そのキーはウェブのコードに届いていません。