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

@Roberrrt, is I understand correctly that library is for converting between the different character sets but doesn't deal with the input method, does it? — Javier Mr
– Javier Mr, Commented Oct 19, 2017 at 8:03
Your problem is input keyup event not trigger when you write in japanese? — Murad Sofiyev
– Murad Sofiyev, Commented Mar 20, 2018 at 21:17
@snezed well overdue.... but guess better late than never. In our case it got solved by stopping reacting to the 'Enter' key being pressed and instead setting an event on the input form submit event. — Javier Mr
– Javier Mr, Commented Apr 16, 2021 at 22:07

digory doo · Accepted Answer · 2018-08-17 06:49:06Z

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.

Collectives™ on Stack Overflow

Enter keyup event in japanese input

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related