Usage of event.which for key constants (deprecated)
- Dominant language
- TypeScript
- Stars
- 92
- Forks
- 63
- PR merge metrics
- No merged PRs in 30d
Description
Please see https://github.com/dojo/widgets/search?q=which&unscoped_q=which
There are multiple references to `event.which` which has been removed from the Web standards and for which Mozilla says "Be aware that this feature may cease to work at any time."
It will be replaced by `event.key` https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key so it might be better to use `(event.key || event.which)` now.
Maybe it could be nice to have a `meta` for Keys (?)
There are also several "mimics" for `.which` which could be replaced by `.key` and an Enum in
https://github.com/dojo/widgets/blob/master/src/common/util.ts where the strings could equal `.key`.
E.g.
"Left", "Up", "Right", "Down" becomes "ArrowLeft" etc.
and Space becomes ' '
Personally I am using
```TypeScript
enum _Keys {
Unidentified = 0,
Cancel = 3,
Help = 6,
Backspace = 8,
Tab = 9,
Clear = 12,
Enter = 13,
Shift = 16,
Control = 17,
Alt = 18,
Pause = 19,
CapsLock = 20,
Escape = 27,
Convert = 28,
NonConvert = 29,
Accept = 30,
ModeChange = 31,
' ' = 32,
PageUp = 33,
PageDown = 34,
End = 35,
Home = 36,
ArrowLeft = 37,
ArrowUp = 38,
ArrowRight = 39,
ArrowDown = 40,
Select = 41,
Print = 42,
Execute = 43,
PrintScreen = 44,
Insert = 45,
Delete = 46,
/* Printable ASCII */
OS = 91,
OSRight = 92,
ContextMenu = 93,
/* ... NumPad */
'*' = 106,
'+' = 107,
'-' = 109,
'.' = 110,
'/' = 111,
/* ... F Keys */
NumLock = 144,
ScrollLock = 145,
VolumeMute = 181,
VolumeDown = 182,
VolumeUp = 183,
Meta = 224,
AltGraph = 225,
Attn = 246,
CrSel = 247,
ExSel = 248,
EraseEof = 249,
Play = 250,
ZoomOut = 251
}
export type Keys = keyof typeof _Keys;
export function keyConstant(event: KeyboardEvent): string {
if (typeof event.key === 'string') { return event.key }
// event has no .key
const i: number = event.which || event.keyCode || event.charCode;
if (!i || typeof i !== 'number') { return 'Unidentified' }
if (i === 17 || i === 162 || i === 163) { return 'Control' }
if (i === 91 || i === 92 || i === 93 || i === 224) { return 'Meta' }
if (i > 64 && i < 91) {
const key = String.fromCharCode(i);
return !event.shiftKey ? key.toLowerCase() : key
} else if (i > 111 && i < 136) {
return `F${i - 111}`
} else if (i > 95 && i < 106) {
return String.fromCharCode(i - 48)
}
return _Keys[i] || 'Unidentified'
}
```
usage
```TypeScript
if (keyConstant(event) === Keys.Enter) { dragon.fire() }
```
```JS
if (keyConstant(event) === 'Enter') { dragon.fire() }
```
my 2 cents: `key` is also a much better naming than `.which` which is confusing because a KeyboardEvent also has "generic" properties shared with other Events …
Contributor guide
Assessment
This issue has not been assessed yet.