How to prevent input/textinput event from firing when input with an input method?

Question

I'm trying to catch the value of an input element every time its value changed. change requires blurring the element so it is not good for my case. I came across this Javascript change event on input element fires on only losing focus question and the accepted answer solved my problem, partly. According to the fiddle the event I should be watching is

$('#name').bind('DOMAttrModified textInput input change keypress paste focus', function () {
.....
})

However it doesn't work so well with characters that require an input method to input. For example, to input Chinese character "長", I'd press "c","h","a","n",“g” and then "space", all these keystrokes are recorded and will fire the events unwantedly - I only want to catch "長" as the input value, and the trigger should only fire when this character appears in the input textbox.

I've tried different combinations of the events, but none of them works. Is there any way to work this around?

Hollister

Answer 1

In theory you can use the compositionend event that is fired when a sequence is done:

document.forms.form01.text.addEventListener('compositionend', e => {
  console.log('Text entered:', e.data);
});

<form name="form01">
  <input type="text" name="text"/>
</form>

Ahead