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

  • 3
    いいね
  • 0
    コメント

現在の状況

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

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

このような状況を受け、DOM Level3 では KeyboardEvent に新たに key というプロパティが加わりました。このプロパティ、IE9 以上でサポートされているため、問題なく使うことが出来ます。

値としては、通常の文字であれば "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