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

Question

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

我通过 jQuery 设置了一个

keyup

回调，以便在用户在输入框中键入内容时运行函数。对于英语来说效果很好。

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

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

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

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

Answer 1

compositionstart

、

compositionupdate

和

compositionend

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

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

• k（IME 可见）按键、compositionstart、compositionupdate、compositionend、input
• a（IME 可见）、compositionstart、compositionupdate、compositionend、input
• enter（IME关闭）按键，输入

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

要访问用户未完成的文本，可以使用事件的

data

属性。

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

有关更多信息，请参阅 MDN：compositionstart、compositionupdate、compositionend、InputEvent。

Answer 2

这是 Firefox 中的一个已知问题，浏览器应该做什么尚不清楚。

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

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