输入法中如何捕捉Enter键的按下事件

Question

我正在监听一个输入框的keyup事件。

当我使用日语输入法输入字符时，事件不会被触发。这是预期行为，因为回车字符被转换为平假名并出现下拉菜单，用户可以选择它们的片假名或汉字版本。在用户输入时，字符会被下划线标记，用户可以通过按回车键选择自己的选择（假名/汉字）。之后，文本不再下划线标记，并且被“提交”到输入文本中。

这种行为是预期的，因为这就是输入法的工作方式。

然而，我并没有预期在文本提交之前收到任何keyup事件（即使在这种情况下，我也希望触发change事件而不是keyup），因为回车键是输入法的一部分。

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

我已经分析了在西方和日本输入法中键入回车时的事件数据，但没有发现任何相关的区别。

应该如何处理这种情况？

- Javier Mr

---

这个在过去非常有帮助：http://wanakana.com/ - roberrrt-s

@Roberrrt，如果我理解正确的话，这个库是用于在不同字符集之间进行转换，但它并不处理输入方法，对吗？ - Javier Mr

我也遇到了同样的问题，有人有什么想法或解决方案吗？ - snezed

也许可以使用文本区域代替输入字段，并检查换行符是否实际附加到其中？ - digory doo

@snezed 已经拖延很久了...但是迟做总比不做好。在我们的情况下，问题得到解决是因为停止对“Enter”键的反应，而是在输入表单的“提交”事件上设置一个事件。 - Javier Mr

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。

- digory doo