JavaScriptでキーボードの入力値を扱う（モダンブラウザ対応）

## 現在の状況

Windows Vista サポート終了により、開発者もIE10以下のブラウザをサポートする必要がなくなりました。使える機能が増えた点も大きいのですが、ここ数年、ブラウザ間の互換性も大きく向上し、ほとんど違いを意識する必要がなくな……ったはずだったのですが、という話がこのエントリの趣旨です。

従来、JavaScript でキーボードの入力値を扱う場合は、keyCode あるいは which を用いるのが一般的でした。しかし、keyCode はシフトキーなどの修飾キーを考慮しなければならなかったり、ブラウザやイベントごとに微妙に異なるところがあったりとなかなか扱いづらい面がありました[^1]。

[^1]: [各ブラウザでキーコードを取得してみた](http://www.programming-magic.com/file/20080205232140/keycode_table.html)

このような状況を受け、DOM Level3 では KeyboardEvent に新たに key というプロパティが加わりました。このプロパティ、[IE9 以上でサポートされている](https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/key)ため、問題なく使うことが出来ます。

値としては、通常の文字であれば "1" や "A" などの文字が、特殊キーであれば "Enter" のようにキー名称が取れます。すばらしい。

しかしながら気になる記述が……

> [1] Internet Explorer's implementation does not completely match the current spec because it is based on an older version of the spec.

実際に確認してみたところ、IE11でも改善されていないどころか、Edge でも同様に古い仕様の値が返ってきてしまいます。というわけで比較表を作ってみました。

## キー値対照表

IE/Edge で異なる値が戻ってくるキーに関しては太字にしてあります。W3C ではテンキーを特別扱いしていませんが、IE/Edgeはテンキー上の記号キーにキー名称が割り当てられていることに注意が必要です。

キーボードにキーがないと動作確認ができないのですべて確認できているわけではありませんが、日本語キーボードで入力できる範囲に関しては概ね確認してあります。

|定義されている場所|W3C キー値[^2]|IE/Edge キー値[^3]|
|-----------------|---------|-------------|
|01. Special Keys|Unidentified||
|-|" "|**Spacebar**|
|-|"-"|**Subtract**|
|-|"*"|**Multiply**|
|-|","|**Separator**|
|-|"."|**Decimal**|
|-|"/"|**Divide**|
|-|"+"|**Add**|
|02. Modifier Keys|Alt|Alt|
|02. Modifier Keys|AltGraph||
|02. Modifier Keys|CapsLock|CapsLock|
|02. Modifier Keys|Control|Control|
|02. Modifier Keys|Fn||
|02. Modifier Keys|FnLock||
|02. Modifier Keys|Meta|**Win**|
|02. Modifier Keys|NumLock|NumLock|
|02. Modifier Keys|ScrollLock|**Scroll**|
|02. Modifier Keys|Shift|Shift|
|02. Modifier Keys|Symbol||
|02. Modifier Keys|SymbolLock||
|02. Modifier Keys (Legacy)|Hyper||
|02. Modifier Keys (Legacy)|Super||
|03. Whitespace Keys|Enter|Enter|
|03. Whitespace Keys|Tab|Tab|
|04. Navigation Keys|ArrowDown|**Down**|
|04. Navigation Keys|ArrowLeft|**Left**|
|04. Navigation Keys|ArrowRight|**Right**|
|04. Navigation Keys|ArrowUp|**Up**|
|04. Navigation Keys|End|End|
|04. Navigation Keys|Home|Home|
|04. Navigation Keys|PageDown|PageDown|
|04. Navigation Keys|PageUp|PageUp|
|05. Editing Keys|Backspace|Backspace|
|05. Editing Keys|Clear|Clear|
|05. Editing Keys|Copy||
|05. Editing Keys|CrSel|**Crsel**|
|05. Editing Keys|Cut||
|05. Editing Keys|Delete|**Del**|
|05. Editing Keys|EraseEof|EraseEof|
|05. Editing Keys|ExSel|**Exsel**|
|05. Editing Keys|Insert|Insert|
|05. Editing Keys|Paste||
|05. Editing Keys|Redo||
|05. Editing Keys|Undo||
|06. UI Keys|Accept|Accept|
|06. UI Keys|Again||
|06. UI Keys|Attn|Attn|
|06. UI Keys|Cancel|Cancel|
|06. UI Keys|ContextMenu|**Apps**|
|06. UI Keys|Escape|**Esc**|
|06. UI Keys|Execute|Execute|
|06. UI Keys|Find||
|06. UI Keys|Help|Help|
|06. UI Keys|Pause|Pause|
|06. UI Keys|Play|Play|
|06. UI Keys|Props||
|06. UI Keys|Select|Select|
|06. UI Keys|ZoomIn||
|06. UI Keys|ZoomOut||
|07. Device Keys|BrightnessDown||
|07. Device Keys|BrightnessUp||
|07. Device Keys|Eject||
|07. Device Keys|Hibernate||
|07. Device Keys|LogOff||
|07. Device Keys|Power||
|07. Device Keys|PowerOff||
|07. Device Keys|PrintScreen|PrintScreen|
|07. Device Keys|Standby||
|07. Device Keys|WakeUp||
|08. IME and Composition Keys|AllCandidates||
|08. IME and Composition Keys|Alphanumeric||
|08. IME and Composition Keys|CodeInput||
|08. IME and Composition Keys|Compose||
|08. IME and Composition Keys|Convert|Convert|
|08. IME and Composition Keys|Dead||
|08. IME and Composition Keys|FinalMode||
|08. IME and Composition Keys|GroupFirst||
|08. IME and Composition Keys|GroupLast||
|08. IME and Composition Keys|GroupNext||
|08. IME and Composition Keys|GroupPrevious||
|08. IME and Composition Keys|ModeChange|ModeChange|
|08. IME and Composition Keys|NextCandidate||
|08. IME and Composition Keys|NonConvert|**Nonconvert**|
|08. IME and Composition Keys|PreviousCandidate||
|08. IME and Composition Keys|Process||
|08. IME and Composition Keys|SingleCandidate||
|08. IME and Composition Keys (Japanese)|Eisu||
|08. IME and Composition Keys (Japanese)|Hankaku||
|08. IME and Composition Keys (Japanese)|Hiragana||
|08. IME and Composition Keys (Japanese)|HiraganaKatakana||
|08. IME and Composition Keys (Japanese)|KanaMode|KanaMode|
|08. IME and Composition Keys (Japanese)|KanjiMode|KanjiMode|
|08. IME and Composition Keys (Japanese)|Katakana||
|08. IME and Composition Keys (Japanese)|Romaji||
|08. IME and Composition Keys (Japanese)|Zenkaku||
|08. IME and Composition Keys (Japanese)|ZenkakuHankaku||
|08. IME and Composition Keys (Korean)|HangulMode||
|08. IME and Composition Keys (Korean)|HanjaMode|HanjaMode|
|08. IME and Composition Keys (Korean)|JunjaMode|JunjaMode|
|09. General-Purpose Function Keys|F1|F1|
|09. General-Purpose Function Keys|F2|F2|
|09. General-Purpose Function Keys|F3|F3|
|09. General-Purpose Function Keys|F4|F4|
|09. General-Purpose Function Keys|F5|F5|
|09. General-Purpose Function Keys|F6|F6|
|09. General-Purpose Function Keys|F7|F7|
|09. General-Purpose Function Keys|F8|F8|
|09. General-Purpose Function Keys|F9|F9|
|09. General-Purpose Function Keys|F10|F10|
|09. General-Purpose Function Keys|F11|F11|
|09. General-Purpose Function Keys|F12|F12|
|09. General-Purpose Function Keys|F13|F13|
|09. General-Purpose Function Keys|F14|F14|
|09. General-Purpose Function Keys|F15|F15|
|09. General-Purpose Function Keys|F16|F16|
|09. General-Purpose Function Keys|F17|F17|
|09. General-Purpose Function Keys|F18|F18|
|09. General-Purpose Function Keys|F19|F19|
|09. General-Purpose Function Keys|F20|F20|
|09. General-Purpose Function Keys|F21|F21|
|09. General-Purpose Function Keys|F22|F22|
|09. General-Purpose Function Keys|F23|F23|
|09. General-Purpose Function Keys|F24|F24|
|09. General-Purpose Function Keys|Soft1||
|09. General-Purpose Function Keys|Soft2||
|09. General-Purpose Function Keys|Soft3||
|09. General-Purpose Function Keys|Soft4||
|10. Multimedia Keys|ChannelDown||
|10. Multimedia Keys|ChannelUp||
|10. Multimedia Keys|Close||
|10. Multimedia Keys|MailForward||
|10. Multimedia Keys|MailReply||
|10. Multimedia Keys|MailSend||
|10. Multimedia Keys|MediaClose||
|10. Multimedia Keys|MediaFastForward||
|10. Multimedia Keys|MediaPause||
|10. Multimedia Keys|MediaPlayPause|MediaPlayPause|
|10. Multimedia Keys|MediaRecord||
|10. Multimedia Keys|MediaRewind||
|10. Multimedia Keys|MediaStop|MediaStop|
|10. Multimedia Keys|MediaTrackNext|**MediaNextTrack**|
|10. Multimedia Keys|MediaTrackPrevious|**MediaPreviousTrack**|
|10. Multimedia Keys|New||
|10. Multimedia Keys|Open||
|10. Multimedia Keys|Print||
|10. Multimedia Keys|Save||
|10. Multimedia Keys|SpellCheck||
|11. Multimedia Numpad Keys|Key11||
|11. Multimedia Numpad Keys|Key12||
|12. Audio Keys|AudioBalanceLeft||
|12. Audio Keys|AudioBalanceRight||
|12. Audio Keys|AudioBassBoostDown||
|12. Audio Keys|AudioBassBoostToggle||
|12. Audio Keys|AudioBassBoostUp||
|12. Audio Keys|AudioFaderFront||
|12. Audio Keys|AudioFaderRear||
|12. Audio Keys|AudioSurroundModeNext||
|12. Audio Keys|AudioTrebleDown||
|12. Audio Keys|AudioTrebleUp||
|12. Audio Keys|AudioVolumeDown|**VolumeDown**|
|12. Audio Keys|AudioVolumeMute|**VolumeMute**|
|12. Audio Keys|AudioVolumeUp|**VolumeUp**|
|12. Audio Keys|MicrophoneToggle||
|12. Audio Keys|MicrophoneVolumeDown||
|12. Audio Keys|MicrophoneVolumeMute||
|12. Audio Keys|MicrophoneVolumeUp||
|13. Speech Keys|SpeechCorrectionList||
|13. Speech Keys|SpeechInputToggle||
|14. Application Keys|LaunchApplication1|LaunchApplication1|
|14. Application Keys|LaunchApplication2|LaunchApplication2|
|14. Application Keys|LaunchCalendar||
|14. Application Keys|LaunchContacts||
|14. Application Keys|LaunchMail|LaunchMail|
|14. Application Keys|LaunchMediaPlayer|**SelectMedia**|
|14. Application Keys|LaunchMusicPlayer||
|14. Application Keys|LaunchPhone||
|14. Application Keys|LaunchScreenSaver||
|14. Application Keys|LaunchSpreadsheet||
|14. Application Keys|LaunchWebBrowser||
|14. Application Keys|LaunchWebCam||
|14. Application Keys|LaunchWordProcessor||
|15. Browser Keys|BrowserBack|BrowserBack|
|15. Browser Keys|BrowserFavorites|BrowserFavorites|
|15. Browser Keys|BrowserForward|BrowserForward|
|15. Browser Keys|BrowserHome|BrowserHome|
|15. Browser Keys|BrowserRefresh|BrowserRefresh|
|15. Browser Keys|BrowserSearch|BrowserSearch|
|15. Browser Keys|BrowserStop|BrowserStop|
|16. Mobile Phone Keys|AppSwitch||
|16. Mobile Phone Keys|Call||
|16. Mobile Phone Keys|Camera||
|16. Mobile Phone Keys|CameraFocus||
|16. Mobile Phone Keys|EndCall||
|16. Mobile Phone Keys|GoBack||
|16. Mobile Phone Keys|GoHome||
|16. Mobile Phone Keys|HeadsetHook||
|16. Mobile Phone Keys|LastNumberRedial||
|16. Mobile Phone Keys|MannerMode||
|16. Mobile Phone Keys|Notification||
|16. Mobile Phone Keys|VoiceDial||
|17. TV Keys|TV||
|17. TV Keys|TV3DMode||
|17. TV Keys|TVAntennaCable||
|17. TV Keys|TVAudioDescription||
|17. TV Keys|TVAudioDescriptionMixDown||
|17. TV Keys|TVAudioDescriptionMixUp||
|17. TV Keys|TVContentsMenu||
|17. TV Keys|TVDataService||
|17. TV Keys|TVInput||
|17. TV Keys|TVInputComponent1||
|17. TV Keys|TVInputComponent2||
|17. TV Keys|TVInputComposite1||
|17. TV Keys|TVInputComposite2||
|17. TV Keys|TVInputHDMI1||
|17. TV Keys|TVInputHDMI2||
|17. TV Keys|TVInputHDMI3||
|17. TV Keys|TVInputHDMI4||
|17. TV Keys|TVInputVGA1||
|17. TV Keys|TVMediaContext||
|17. TV Keys|TVNetwork||
|17. TV Keys|TVNumberEntry||
|17. TV Keys|TVPower||
|17. TV Keys|TVRadioService||
|17. TV Keys|TVSatellite||
|17. TV Keys|TVSatelliteBS||
|17. TV Keys|TVSatelliteCS||
|17. TV Keys|TVSatelliteToggle||
|17. TV Keys|TVTerrestrialAnalog||
|17. TV Keys|TVTerrestrialDigital||
|17. TV Keys|TVTimer||
|18. Media Controller Keys|AVRInput||
|18. Media Controller Keys|AVRPower||
|18. Media Controller Keys|ClosedCaptionToggle||
|18. Media Controller Keys|ColorF0Red||
|18. Media Controller Keys|ColorF1Green||
|18. Media Controller Keys|ColorF2Yellow||
|18. Media Controller Keys|ColorF3Blue||
|18. Media Controller Keys|ColorF4Grey||
|18. Media Controller Keys|ColorF5Brown||
|18. Media Controller Keys|Dimmer||
|18. Media Controller Keys|DisplaySwap||
|18. Media Controller Keys|DVR||
|18. Media Controller Keys|Exit||
|18. Media Controller Keys|FavoriteClear0||
|18. Media Controller Keys|FavoriteClear1||
|18. Media Controller Keys|FavoriteClear2||
|18. Media Controller Keys|FavoriteClear3||
|18. Media Controller Keys|FavoriteRecall0||
|18. Media Controller Keys|FavoriteRecall1||
|18. Media Controller Keys|FavoriteRecall2||
|18. Media Controller Keys|FavoriteRecall3||
|18. Media Controller Keys|FavoriteStore0||
|18. Media Controller Keys|FavoriteStore1||
|18. Media Controller Keys|FavoriteStore2||
|18. Media Controller Keys|FavoriteStore3||
|18. Media Controller Keys|Guide||
|18. Media Controller Keys|GuideNextDay||
|18. Media Controller Keys|GuidePreviousDay||
|18. Media Controller Keys|Info||
|18. Media Controller Keys|InstantReplay||
|18. Media Controller Keys|Link||
|18. Media Controller Keys|ListProgram||
|18. Media Controller Keys|LiveContent||
|18. Media Controller Keys|Lock||
|18. Media Controller Keys|MediaApps||
|18. Media Controller Keys|MediaAudioTrack||
|18. Media Controller Keys|MediaLast||
|18. Media Controller Keys|MediaSkipBackward||
|18. Media Controller Keys|MediaSkipForward||
|18. Media Controller Keys|MediaStepBackward||
|18. Media Controller Keys|MediaStepForward||
|18. Media Controller Keys|MediaTopMenu||
|18. Media Controller Keys|NavigateIn||
|18. Media Controller Keys|NavigateNext||
|18. Media Controller Keys|NavigateOut||
|18. Media Controller Keys|NavigatePrevious||
|18. Media Controller Keys|NextFavoriteChannel||
|18. Media Controller Keys|NextUserProfile||
|18. Media Controller Keys|OnDemand||
|18. Media Controller Keys|Pairing||
|18. Media Controller Keys|PinPDown||
|18. Media Controller Keys|PinPMove||
|18. Media Controller Keys|PinPToggle||
|18. Media Controller Keys|PinPUp||
|18. Media Controller Keys|PlaySpeedDown||
|18. Media Controller Keys|PlaySpeedReset||
|18. Media Controller Keys|PlaySpeedUp||
|18. Media Controller Keys|RandomToggle||
|18. Media Controller Keys|RcLowBattery||
|18. Media Controller Keys|RecordSpeedNext||
|18. Media Controller Keys|RfBypass||
|18. Media Controller Keys|ScanChannelsToggle||
|18. Media Controller Keys|ScreenModeNext||
|18. Media Controller Keys|Settings|
|18. Media Controller Keys|SplitScreenToggle||
|18. Media Controller Keys|STBInput||
|18. Media Controller Keys|STBPower||
|18. Media Controller Keys|Subtitle||
|18. Media Controller Keys|Teletext||
|18. Media Controller Keys|VideoModeNext||
|18. Media Controller Keys|Wink||
|18. Media Controller Keys|ZoomToggle|**Zoom**|

[^2]: [UI Events KeyboardEvent key Values](https://w3c.github.io/uievents-key/)
[^3]: [MSDN Key Identifiers](https://msdn.microsoft.com/en-us/library/gg305568(v=vs.85).aspx)