javascriptの入力イベントでIME未確定時は発火させない設定方法

投稿日：

javascript

テキストボックスに入力中の内容をjavascriptでチェックする場合など
keydownイベントを使うとIME未確定時にも発火してしまい無駄に沢山処理が走ってしまいますし、
textInputイベントは対応していないブラウザがあるし、
そんな時の対応方法です。

javascriptのイベントにはIME入力開始時の「compositionstart」とIME確定時の「compositionend」というものがあります。
これを使ってIME入力中を判定できるフラグを作ります。

具体的には以下のようにします。

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

<script>
// とりあえずオブジェクト化してますが、ベタ書きでも構いません
var inputEventHandler = {
  compFlg : false, // IME入力中フラグ

  initialize : function(){
    let targetElm = document.getElementById('hoge');

    targetElm.addEventListener('keydown', function() {
      // ブラウザによりcompositionendイベントとの発火タイミングが前後するのでsetTimeoutで少し遅らせます
      setTimeout(function(){
        if (self.compFlg) {
          return;
        }
        console.log('ここで何か処理を実行する');
      }, 10)
    });

    targetElm.addEventListener('compositionstart', function() {
      self.compFlg = true;
    });

    targetElm.addEventListener('compositionend', function() {
      self.compFlg = false;
    });
  }
}
inputEventHandler.initialize();
</script>