Enter keyup event in japanese input

Question

I've an input field on which I'm listening to keyup events.

Using the Japanese input method I start typing characters and the event doesn't get triggered; which is expected as the enter characters are being converted to hiragana and a drop down appears so the user can select the katakana or kanji version of them. While the user is typing the characters appear underlined and the user can select it's choice (kanas/kanji) by pressing enter. After that the text is no longer underlined and is 'commited' to the input text.

This behavior is expected as is how the input method is intended to work.

However, I wasn't expecting to receive any keyup events until the text has been commited (an even then I would expect a change event no a keyup), since that enter is part of how the input method works.

I'm listening to keyup events because I need to trigger an action when the user releases the enter key.

I have analyzed event data when typing an enter in western and japanese input method and didn't find any relevant difference.

Which is the proper way to deal with that?

Regards

Answer 1

You can achieve this with the following technique:

• Use textarea instead of input
• Use an onInput listener instead of onKeyDown
• Detect newlines in onInput

The relevant JavaScript code:

function onInput(evt) {
   let val = evt.target.value;
   const nlAt = val.indexOf('\n');
   if (nlAt >= 0) {
       // A newline was detected in the input!
       // Remove the newline from the field:
       val = val.replace(/\n/g, '');
       evt.target.value = val;
       // And fire our custom onReturnKey handler:
       onReturnKey(val);
   }
}

You can try this CodePen.