回答編集履歴
2
廃止された keyCode, witch プロパティ
answer
CHANGED
|
@@ -14,5 +14,43 @@
|
|
|
14
14
|
|
|
15
15
|
- [4.6.1.1. KeyboardEvent - UI Events （日本語訳）](https://triple-underscore.github.io/uievents-ja.html#idl-keyboardevent)
|
|
16
16
|
- [KeyboardEvent.key - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
|
|
17
|
+
- [KeyboardEvent.key - Can I use...](https://caniuse.com/#feat=keyboardevent-key)
|
|
17
18
|
|
|
19
|
+
### 廃止された keyCode, witch プロパティ
|
|
20
|
+
|
|
21
|
+
- [7. 旧来のキー＆マウス属性 - UI Events 仕様 — Appendix（日本語訳）](https://triple-underscore.github.io/uievents-appendix-ja.html#legacy-key-attributes)
|
|
22
|
+
|
|
23
|
+
> **7. 旧来のキー＆マウス属性**
|
|
24
|
+
> この節は規範的ではない。
|
|
25
|
+
> 以下の属性は、廃用にされた。 これらは、［ これらのキーボードイベントが要求される旧来のソフトウェア ］との互換性が要求される UA によってのみ実装されるべきである。
|
|
26
|
+
> ...
|
|
27
|
+
> したがって，この仕様は、キーボード入力を取り扱うためによく使役されるイベントや属性を規範的に定義しない — 旧来の内容との互換性のために UA 内に在ってもよいが。 作者は、 charCode ／ keyCode 属性の代わりに key 属性を利用するべきである。
|
|
28
|
+
|
|
29
|
+
- [7.2. 旧来の KeyboardEvent 追補的インタフェース - UI Events 仕様 — Appendix（日本語訳）](https://triple-underscore.github.io/uievents-appendix-ja.html#legacy-KeyboardEvent)
|
|
30
|
+
|
|
31
|
+
> **7.2. 旧来の KeyboardEvent 追補的インタフェース**
|
|
32
|
+
> ブラウザによるキーボードのサポートは、伝統的に 3 個の場当たり的な属性［ keyCode, charCode, UIEvent の which ］に依拠している。
|
|
33
|
+
> これらの属性は、いずれも，押されたキーのある側面を表現する数的コードを返す：
|
|
34
|
+
>
|
|
35
|
+
> - keyCode は，キー自身の index 。
|
|
36
|
+
> - charCode は， 文字キーの ASCII 値。
|
|
37
|
+
> - which は，可用な所では文字値／他の場合はキー index 。
|
|
38
|
+
|
|
39
|
+
keyCode, witch プロパティは UI Events で廃止されましたが、後方互換性が要求されるUAでは実装されるべき、とあります。
|
|
40
|
+
両者は同じ立ち位置でありながら、witch プロパティは実装されていないブラウザがある欠点があります(Google Chrome では使用できません)。
|
|
41
|
+
|
|
42
|
+
```JavaScript
|
|
43
|
+
document.addEventListener('keydown', function (event) {
|
|
44
|
+
console.log('witch' in event, 'keyCode' in event, 'key' in event); // false true true
|
|
45
|
+
}, false);
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
現状としては、key が使えるなら key を使い、使えないなら keyCode を使うアプローチが安全です。
|
|
49
|
+
|
|
50
|
+
```JavaScript
|
|
51
|
+
document.addEventListener('keydown', function (event) {
|
|
52
|
+
console.log('key' in event ? event.key : event.keyCode);
|
|
53
|
+
}, false);
|
|
54
|
+
```
|
|
55
|
+
|
|
18
56
|
Re: qwdcf_mag さん
|
1
KeyboardEvent#key
answer
CHANGED
|
@@ -1,7 +1,18 @@
|
|
|
1
|
+
### keyCode プロパティ
|
|
2
|
+
|
|
3
|
+
- [7.3. 旧来のキーモデル - UI Events 仕様 — Appendix（日本語訳）](https://triple-underscore.github.io/uievents-appendix-ja.html#legacy-key-models)
|
|
4
|
+
- [KeyboardEvent.keyCode - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)
|
|
5
|
+
|
|
1
6
|
`event.keyCode` では？
|
|
7
|
+
(現在では `KeyboardEvent#key` が推奨されますが、後方互換性の為に `keyCode` プロパティが使用される事はあります)
|
|
2
8
|
|
|
3
9
|
```JavaScript
|
|
4
10
|
console.dir(event);
|
|
5
11
|
```
|
|
6
12
|
|
|
13
|
+
### KeyboardEvent#key
|
|
14
|
+
|
|
15
|
+
- [4.6.1.1. KeyboardEvent - UI Events （日本語訳）](https://triple-underscore.github.io/uievents-ja.html#idl-keyboardevent)
|
|
16
|
+
- [KeyboardEvent.key - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
|
|
17
|
+
|
|
7
18
|
Re: qwdcf_mag さん
|