JavaScript中如何检测输入框内日语IME输入法是否处于激活状态？

问题场景 #

使用JavaScript开发回车提交表单的输入框功能时，若用户使用日语等带候选词选择的输入法，按回车确认候选词的操作会误触发表单提交，需要实现仅在IME完全完成输入后，回车键才触发提交的逻辑。

原生API说明 #

目前没有可直接查询IME是否处于激活状态的JavaScript原生接口，可使用的相关能力如下：

• compositionstart事件：IME开始输入（出现候选词面板）时触发
• compositionend事件：IME完成输入（候选词确认输入到输入框）时触发
• KeyboardEvent.isComposing属性：可判断当前按键事件是否在IME输入上下文中触发

已知坑点 #

• 触发compositionend事件的最后一次确认回车，对应按键事件的isComposing值为false，无法直接通过该属性过滤掉这次误触发的回车
• keypress事件和compositionend事件的执行顺序存在竞态，如果单纯用布尔值同步维护IME状态，退出IME时按下的回车仍有可能误触发提交

可行实现方案 #

通过手动维护状态+异步延迟规避竞态，具体实现逻辑：

1. 定义布尔变量isIME，初始值设为false
2. 监听输入框的compositionstart事件，触发时将isIME赋值为true
3. 监听输入框的compositionend事件，触发时通过setTimeout异步将isIME赋值为false，确保状态更新晚于同轮事件循环中的按键事件处理
4. 回车提交的逻辑中，先判断isIME的值，仅当isIME为false时才执行提交操作

方案效果 #

IME输入过程中按回车确认候选时，isIME为true，回车事件处理逻辑会跳过提交；之后compositionend的异步回调执行，将isIME重置为false，后续正常无IME输入时按回车即可正常提交。该方案虽然用到了非确定性的异步延迟，但实际生产场景下运行稳定。

内容的提问来源于stack exchange，提问作者ablygo