keyCode の値が取得できない

Question

keycodeを取得して処理をしたいと思っています。
以下のようなコードにしたところ、
event.targetは取得できるのですが、KeyCodeがundefinedになってしまいます。

$(document).on("keyup",function(event){
    console.log(event.target);    //取得できている
    console.log(event.KeyCode);   //undefined
});

なにがいけないのでしょうか。

ブラウザはchromeです。
よろしくお願いいたします。

Answer 1

keyCode プロパティ

• 7.3. 旧来のキーモデル - UI Events 仕様 — Appendix（日本語訳）
• KeyboardEvent.keyCode - Web APIs | MDN

event.keyCode では？
(現在では KeyboardEvent#key が推奨されますが、後方互換性の為に keyCode プロパティが使用される事はあります)

console.dir(event);

KeyboardEvent#key

• 4.6.1.1. KeyboardEvent - UI Events （日本語訳）
• KeyboardEvent.key - Web APIs | MDN
• KeyboardEvent.key - Can I use...

廃止された keyCode, witch プロパティ

• 7. 旧来のキー＆マウス属性 - UI Events 仕様 — Appendix（日本語訳）

7. 旧来のキー＆マウス属性
この節は規範的ではない。
以下の属性は、廃用にされた。 これらは、［ これらのキーボードイベントが要求される旧来のソフトウェア ］との互換性が要求される UA によってのみ実装されるべきである。
...
したがって，この仕様は、キーボード入力を取り扱うためによく使役されるイベントや属性を規範的に定義しない — 旧来の内容との互換性のために UA 内に在ってもよいが。 作者は、 charCode ／ keyCode 属性の代わりに key 属性を利用するべきである。

• 7.2. 旧来の KeyboardEvent 追補的インタフェース - UI Events 仕様 — Appendix（日本語訳）

7.2. 旧来の KeyboardEvent 追補的インタフェース
ブラウザによるキーボードのサポートは、伝統的に 3 個の場当たり的な属性［ keyCode, charCode, UIEvent の which ］に依拠している。
これらの属性は、いずれも，押されたキーのある側面を表現する数的コードを返す：

• keyCode は，キー自身の index 。
• charCode は， 文字キーの ASCII 値。
• which は，可用な所では文字値／他の場合はキー index 。

keyCode, witch プロパティは UI Events で廃止されましたが、後方互換性が要求されるUAでは実装されるべき、とあります。
両者は同じ立ち位置でありながら、witch プロパティは実装されていないブラウザがある欠点があります(Google Chrome では使用できません)。

document.addEventListener('keydown', function (event) {
  console.log('witch' in event, 'keyCode' in event, 'key' in event);  // false true true
}, false);

現状としては、key が使えるなら key を使い、使えないなら keyCode を使うアプローチが安全です。

document.addEventListener('keydown', function (event) {
  console.log('key' in event ? event.key : event.keyCode);
}, false);

Re: qwdcf_mag さん

Comments

[退会済みユーザー]

ありがとうございます！ 小文字にしたら問題なく動きました。jsはどうも慣れず色々なところでハマってしまいます。
仕様変更についての情報もありがとうございます。

Answer 2

ググりましょう
…しょうがないですね、今回だけですよ？

今回はjQueryのkeyup時にkeycodeが取れないという質問ですね。
検索結果 (JavaScript keyup keycode)

【備忘録】jQueryのkeyup()でkeycodeを取得するには.which - 社長ブログ

$("#test_text_box").keyup(function(e) {
  if (e.which == 13) {
    foo();
  }
});

これだけで殆ど片付いたようなものですが、一応ｊQueryの公式サイトも覗いてみましょう。
この方は出来た、コード書いた終わりではなく、公式の参考URLまでバッチリ載せてます。

.keyup() - jQuery

To determine which key was pressed, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the key code. This code corresponds to a key on the keyboard, including codes for special keys such as arrows. For catching actual text entry, .keypress() may be a better choice.

ざっと斜め読みした感じと、ページ下記のサンプルコードにより、どのキーが押下されたかは.whichプロパティを参照するように書いてあります。

この様に、ググって問題解決を行う能力が上がればいろいろとはかどります。
色々検索を行うようにしてみてください。

Comments

[think49]

witchプロパティの使用は好ましくないと思います(理由は回答欄に書きました)。
こういうことがあると、jQuery API DocumentもWeb標準系のドキュメントとしては信用できないですね…。

[退会済みユーザー]

ありがとうございます！ 一応調べた上でなのですが、大文字小文字でハマっていたようです。jsがどうもなかなか慣れずに色々なところでミスります。