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

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





やりたいこと



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



サンプル



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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 入力フィールド
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 );





参考



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

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



2018年6月17日日曜日