IME変換確定のEnterかどうかを判定する

方法1. compositionstart, compositionend

以下のイベントを使う方法。IE 11でも使える。

 1let lastQuery = '';
 2let isComposing = false;
 3const inputElm = document.getElementById('input');
 4
 5inputElm.addEventListener('compositionstart', (e) => {
 6  isComposing = true;
 7});
 8
 9inputElm.addEventListener('compositionend', (e) => {
10  lastQuery = inputElm.value.trim();
11
12    // do someting
13
14  isComposing = false;
15});
16
17inputElm.addEventListener('input', (e) => {
18  if (isComposing) {
19    return;
20  }
21
22  if (e.target.value.trim() == lastQuery) {
23    return;
24  }
25
26  lastQuery = e.target.value.trim();
27
28    // do someting
29});

方法2. InputEvent.inputType

InputEvent.inputType - Web API | MDN

insertText, insertFromPaste, insertFromComposition, insertCompositionText, deleteContentBackward, deleteCompositionText などの多くの値を取ります。

変換確定前の入力を無視したいということであればinsertCompositionText, deleteCompositionText の場合に処理を中断すればいいことになります。

IE 11では使えないことに注意。

1document.getElementById('input').addEventListener('input', (e) => {
2    if (e.inputType == 'insertCompositionText' || e.inputType == 'deleteCompositionText') {
3      console.log('inputType:', e.inputType);
4      return;
5    }
6    console.log('inputType:', e.inputType, e.data, e.target.value);
7  });