在日语输入中输入keyup事件

Question

我有一个输入字段,我正在收听键盘事件.

使用日语输入法我开始输入字符,事件不会被触发; 当输入字符被转换为平假名并且出现下拉菜单时,这是预期的,因此用户可以选择它们的片假名或汉字版本.当用户输入时,字符显示为带下划线,用户可以通过按Enter键选择它(kanas/kanji).之后,文本不再加下划线并且"提交"到输入文本.

预期此行为与输入方法的工作方式一样.

但是,在文本提交之前我没想到会收到任何keyup事件(即使那时我也希望更改事件没有keyup),因为输入是输入方法工作方式的一部分.

我正在收听键盘事件,因为我需要在用户释放回车键时触发操作.

我在输入西方和日本输入法输入时分析了事件数据,但未发现任何相关差异.

处理这个问题的正确方法是什么？

问候

Answer 1

您可以使用以下技术来实现此目的：

• 使用textarea而不是input
• 使用onInput监听器而不是onKeyDown
• 检测换行符onInput

相关的JavaScript代码：

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);
   }
}

你可以试试这个CodePen。