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') {
}