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

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

概要

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

Firefox の現行版では、例えば日本語で「絵」と入力したい場合、以下のようなイベントが発生します。

  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 }

将来のバージョンでは、これは以下のようになります。

  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 の国際化エンジニアによる ニュースグループへの投稿 を参照してください。

参考資料