iPhone / iPad で日本語入力の確定キー押下を keydown / up イベントで検知できなかった話 #JavaScript

ちょっとハマったのでメモしておきます。

バージョン

iPad 17.4.1
iPhone 15.8.2

やりたいこと

やりたいことは以下の２つです。

iPhone / iPad で、日本語入力時（ローマ字入力モード）の確定キー押下を検知したい
iPhone / iPad で、日本語入力時（ローマ字入力モード）の変換候補の中から何か１つが選択されたことを検知したい

以下、 iPhone のスクリーンショットになります。

ちょっと分かりづらいと思いますが、日本語ローマ字入力モードで「くま」の２文字を入力した直後の、まだ未確定のときのスクリーンショットになります。

このまま「くま」で入力を確定させたい場合は赤枠内の確定ボタンを押下すると思いますが、これがやりたいことの 1 になります。
「熊本」で確定させたい場合は黄色枠内の変換候補の中から「熊本」を選択すると思いますが、これがやりたいことの 2 になります。

<input type="text" id="hoge">

const inputElement = document.getElementById('hoge');
inputElement.addEventListener('keydown', (event) => {
  // 発火しない
});

単純に、上記のコードのように keydown イベントで検知できるだろうと思っていたのですが検知できませんでした。keyup イベントも検知できませんでした。

Safari 以外だとどうなるかが気になり、iPhone + Chrome でも試してみましたが、Safari の時と同様に検知できませんでした。※ iPad + Chrome は未検証です。

解決方法

compositionend イベントで検知できます。

入力可能な input 要素などは、IME を使って文字入力を行うと、変換開始時に compositionstart イベントが、変換終了（確定）時に compositionend イベントが発生するため、これを利用します。

CompositionEvent オブジェクトの data プロパティに 確定した文字列 が入っています。

const inputElement = document.getElementById('hoge');
inputElement.addEventListener('compositionend', (event) => {
  // 発火する
  // event.data に「確定した文字列」が入っている
});

ちなみに、日本語入力時でないときは確定キーではなく改行キーに変わると思いますが、この改行キーの押下については keydown / up イベントで検知できました。