昔 keyString.js という KeyBoardEvent からなんとなく押されたキーの文字列表記になおすやつを書いたことがある。
しかしこれは実装が不完全で一部のキーがちゃんと判定されなかったりした。が、マルチプラットフォーム・マルチブラウザで検証するような気力はないし、そんなことしても無駄になるのは目に見えているのでやる気はおきない。
KeyBoardEvent.key
KeyBoardEvent に key というプロパティが DOM Level 3 Events ではできることになっていて、これは Enter キーの場合 "Enter" という文字列が入り、物理的なキー位置(ということになっている謎の数値)ではなく、論理的なキーを表現するということになっている。が、全てのブラウザで同じように実装されているとはいえない。
ということで KeyBoardEvent.key には polyfill をつかおう。
https://github.com/inexorabletash/polyfill/blob/master/keyboard.js
を読みこむだけでいい。完璧ではないがおそらく現時点で一番まともだと思う。このファイルにはライセンスが書いてないが polyfill 全体で Public Domain となっており適当に扱っても問題ない。
KeyBoardEvent.key を直接判定に利用するには問題がある
KeyBoardEvent.key は modifierKey (シフトキーとか) の状態は当然含んでいないので、単に
if (e.key === 'Enter') {
} で判定してしまうと、Shift+Enter や Alt+Enter なども同じもの扱いになってしまう。かといって
if (e.shiftKey && e.key === 'Enter') {
} else
if (e.altKey && e.key === 'Enter') {
} else
if (!e.shiftKey && !e.altKey && e.key === 'Enter') {
} とか全部書くのは見通しが悪い。
ということでしかたなしに
var key = (e.altKey?"Alt-":"")+(e.ctrlKey?"Control-":"")+(e.metaKey?"Meta-":"")+(e.shiftKey?"Shift-":"")+e.key;
みたいなのを1行書いて modifier key のプリフィックスをつけておくとやはり楽になる
if (key === 'Shift-Enter') {
} else
if (key === 'Alt-Enter') {
} else
if (key === 'Enter') {
} 
