IME 変換中にも keydownkeyup イベントが発生するようになりました

公開日: | カテゴリー: DOM

概要

UI Events 仕様 や他のブラウザーの挙動に合わせるため、Firefox は、インプットメソッドエディター (IME) による変換中にも keydownkeyup 両イベントの発生を行うようにしました。IME ヘルパーアプリケーションは、中国、日本、韓国、台湾 (CJKT) の人たちによって文字入力欄に母国語のマルチバイト文字を入力するために使われます。

従来、例えば日本語で「絵」と入力したい場合、以下のようなイベントが発生していました。

  1. keydown { isComposing: false, key: "e", keyCode: 69 }
  2. compositionstart { data: "" }
  3. compositionupdate { data: "え" }
  4. input { isComposing: true }
  5. compositionupdate { data: "絵" }
  6. input { isComposing: true }
  7. compositionend { data: "絵" }
  8. input { isComposing: false }
  9. keyup { isComposing: false, key: "Enter", keyCode: 13 }

Firefox 65 以降、これは以下のようになります。

  1. keydown { isComposing: false, key: "Process", keyCode: 229 }
  2. compositionstart { data: "" }
  3. compositionupdate { data: "え" }
  4. input { isComposing: true }
  5. keyup { isComposing: true, key: "e", keyCode: 69 }
  6. keydown { isComposing: true, key: "Process", keyCode: 229 }
  7. compositionupdate { data: "絵" }
  8. input { isComposing: true }
  9. keyup { isComposing: true, key: " ", keyCode: 32 }
  10. keydown { isComposing: true, key: "Process", keyCode: 229 }
  11. compositionend { data: "絵" }
  12. input { isComposing: false }
  13. keyup { isComposing: false, key: "Enter", keyCode: 13 }

ちなみに、英語で「e」と入力した場合、4 つのイベントしか発生しません。

  1. keydown { isComposing: false, key: "e", keyCode: 69 }
  2. keypress { isComposing: false }
  3. input { isComposing: false }
  4. keyup { isComposing: false, key: "e", keyCode: 69 }

お気付きの通り、変換中 key プロパティは "Process" となり、compositionstartcompositionend イベントの間は isComposing プロパティも true となります。つまり、変換中に何もしたくない場合は、以下のように keydownkeyup あるいは input イベントリスナーの中で単純に isComposing をチェックしてください。

$input.addEventListener('keydown', event => {
  if (event.isComposing) {
    return;
  }
  // 何か処理を行います
});

この新たな挙動は Firefox 61 以降 Nightly と早期 Beta/DevEdition チャンネルでは有効化されていました。ウェブアプリケーション開発者の皆さんには、自分のアプリをテストし、それが CJKT ユーザーにとって正常に動作し続けるよう確認することをお勧めします。より詳しい実装メモは Mozilla の国際化エンジニアによる ニュースグループへの投稿 を参照してください。

参考資料