JavaScriptで変換確定のエンターとそれ以外を判断する

やたらとめんどくさいことをしているサンプルが多い。
ジェイクエリは使いません。





やりたいこと



エンターを押したときに何らかの処理をしたい。
ただし"keyup"イベントを利用すると日本語入力中の変換確定時にも反応してしまうのでこれをなんとかしたい。



サンプル



日本語入力中はkeypressイベントが発火しないのでこれを利用する。

// 入力フィールド
var input = document.getElementById("input");

var canEnter = false

input.addEventListener( "keypress" , function () {
  canEnter = true
} , false );

input.addEventListener( "keyup" , function () {
  if(!canEnter) {
    return
  }
  canEnter = false
  // 以下エンターを押したときの挙動

} , false );

See the Pen 変換中の判定 by ninomae-makoto (@ninomae-makoto) on CodePen.





参考



https://garafu.blogspot.com/2015/09/javascript-ime-enter-event.html

IE11及びメジャーなモダンブラウザで動作するようだ。



2018年6月17日日曜日