IME 日本語入力中に esc でキャンセルした時の挙動を制御する

esc キーを押したらモーダルを閉じるや処理をキャンセルするというイベントを設定していたのですが、IME で日本語を入力して変換している時に押される esc にも反応してしまい、思わぬ挙動になってしまっていました。

そこで IME で入力中かどうかを判定するように compositionstart / compositionend を使って制御してみました。

let isCompositing = false

document.addEventListener('keydown', function () {
  if (e.keyCode == 27 && !isComposit) {
    console.log('esc event')
  }
})

document.addEventListener('compositionstart', function () {
  isCompositing = true
})

document.addEventListener('compositionend', function () {
  isCompositing = false
})

keyup ではなく keydown にしているのは、イベントの発火順が keydown -> compositionstart -> compositionend -> keyup になっているためです。 keyup で esc キーイベントを設定すると、入力を完全にキャンセルしたときにも発火してしまいます。

ブラウザ対応

以下のブラウザで動作確認をしました。古い IE をサポートしないのであればこれで充分そうです。

• Chrome 64
• Safari 11
• Firefox 58
• Edge 40
• Internet Explorer 11