Input 输入中文时触发什么事件

在Web开发中，当在Input输入框中输入中文时，主要触发的事件是input事件和keyup、keydown事件。不过，对于中文输入来说，由于存在拼音输入法的候选过程，直接监听这些事件可能无法准确捕获每个汉字的输入完成时机。这是因为中文输入法在用户选择候选词确认之前，浏览器可能不会立即触发input事件。

如果需要在用户完成一个中文词语的输入后执行某些操作，比较实用的做法是结合compositionstart、compositionupdate和compositionend这几个事件来实现。这些事件专门用于处理IME（输入法编辑器）的复合文本输入，如中文、日文或韩文等。

• compositionstart：当开始输入复合字符（如中文）时触发，此时用户可能正在输入拼音或选词。
• compositionupdate：在复合字符输入过程中，每当组成的内容发生变化时触发。
• compositionend：用户完成复合字符的输入，即选定了一个词语后触发。这是获取完整中文输入的好时机。

示例代码如下：

let inputElement = document.getElementById('your-input-id');

inputElement.addEventListener('compositionstart', function() {
    console.log('中文输入开始');
});

inputElement.addEventListener('compositionupdate', function(e) {
    console.log('中文输入中...', e.data);
});

inputElement.addEventListener('compositionend', function(e) {
    console.log('中文输入结束，可以在这里处理完整的中文词语:', e.target.value);
});

通过监听compositionend事件，你可以在用户完成中文词语的输入后执行相应的逻辑处理。同时针对Element-Plus 和 antd 的Input组件也是ok的。