javascript - 在日文输入中输入 keyup 事件

Question

我有一个输入字段，我正在其上监听 keyup 事件。

我使用日文输入法开始输入字符，但事件没有被触发；这是预期的，因为输入字符正在转换为平假名，并且会出现一个下拉列表，以便用户可以选择它们的片假名或汉字版本。当用户键入字符时，字符会显示为下划线，用户可以通过按 enter 来选择它的选项(假名/汉字)。之后，文本不再带有下划线，并“提交”到输入文本。

此行为符合输入法的预期工作方式。

但是，在提交文本之前，我不希望收到任何 keyup 事件(即便如此，我也希望没有 keyup 的更改事件)，因为 enter 是输入法工作方式的一部分。

我正在监听 keyup 事件，因为我需要在用户释放回车键时触发一个 Action 。

我分析了在西文和日文输入法中输入回车时的事件数据，没有发现任何相关差异。

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

问候

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 .