スマートフォンの入力で「確定・予測変換」をトリガーに処理を実行する

前置き

keydownやinputイベントを張っても、端末によって確定や予測変換は発火したりしなかったりします。
タイマーをセットしてvalueを監視する、でこの問題を回避することができますが、今回どうしても確定や予測変換で発火させたい要件があったので調べました。

結論

イベント compositionend を使用する

サンプル

使用例

※jqueryを読み込んでいるものとします。

var $input = $('.input');
$input.on('compositionend', function() {
  // 確定・予測変換時に処理したいイベント
});

シンプルに書くとこうなります。

実際にはcompositioneventの対応状況による分岐も必要だと思うので
私が思う実用レベルのコードを記述します。

var $input = $('.input');
if ('CompositionEvent' in window) {
  $input.on('compositionend', function() {
    setTimeout(function() {
      if (!$(this).val().length) return;
      // 確定・予測変換時に処理したいイベント
    },0);
  });
} else {
  // タイマーによるvalue監視など
}

簡単にコードの説明をします。

if ('CompositionEvent' in window) によって、対応状況による分岐をします。

対応している場合、 compositionendイベントを張るのですが、発火時には入力内容が
反映されていないため、0タイマーを設定することで入力後の状態で処理を行います。

if (!$(this).val().length) return; は、文字列削除によって０文字になったときに
確定とみなされるのか、イベントが発火するため、そこで処理を行わないための分岐です。

検証

検証と言えるほどではありませんが
数台のiphoneとandroidで確認した結果、iphone safari、android chrome & 標準ブラウザで
同じように確定・予測変換でイベントが発火しました。

参考