在 Javascript 中按下 Enter 之前检测 IME 输入

Question

我什至不确定这是否可能，所以如果这是一个愚蠢的问题，我深表歉意。

我通过 jQuery 设置了一个 keyup 回调，以便在用户在输入框中键入内容时运行一个函数。对于英语来说效果很好。

但是，当输入日语/韩语/中文文本时，只有在用户确认其文本后才会调用该函数。

是否有可能检测到他们已经开始打字，并访问他们尚未完成的文本？

我想这可能是操作系统级别的事情，所以 Javascript 无法访问它。

编辑：我刚刚意识到这在 Chrome 和 Safari 中有效，但在 Firefox 中无效（还没有机会在 Windows 上尝试）。所以 Chrome 调用 keyup 就可以获取文本了。但我在 Firefox 中仍然遇到上述问题。

Answer 1

compositionstart、compositionupdate 和 compositionend 事件可能会有所帮助。
它们可以帮助您检测何时使用 IME 输入。

例如，考虑使用 IME 输入日语中的 か (ka)。
将触发以下事件（按所示顺序）：

• k（IME 可见）keydown、compositionstart、compositionupdate、compositionend< /strong>，输入
• a（IME可见），compositionstart，compositionupdate，compositionend，输入
• enter（IME 关闭） keydown, input

请注意，仅当 IME 可见时（按下 enter 之前）才会触发合成事件。另请注意，keypress 事件未触发。这只针对非 IME 输入触发。

要访问用户未完成的文本，您可以使用事件的 data 属性。

$('#input').on('compositionupdate', function(e) {
    console.log(e.data);
});

有关详细信息，请参阅 MDN：compositionstart、组合更新，组合结束，InputEvent。

Answer 2

这是 Firefox 中的已知问题，以及浏览器应该采取的措施 em>正在做不清楚。

解决此问题的一种可能方法是此处演示，其中文本字段轮询文本更改（而不是依赖事件）。

Answer 3

如果 IME 在 React 应用程序中处于活动状态，请防止提交，请

向 @james-lawson 大声喊叫，谢谢你！

export function MyTextarea() {
    const [isComposing, setIsComposing] = useState(false);

    <textarea
        onCompositionEnd={() => setIsComposing(true)}
        onCompositionStart={() => setIsComposing(false)}
        onKeyDown={(ev) => {
            if (ev.code === 'Enter' && !ev.shiftKey && !isComposing) {
                // submit();
            }
        }}
    />;
}