如何过滤输入框中输入法候选状态

比较常见的场景,假如一个联想搜索框,如果在键盘输入候选过程中,并不想将这些关键词(候选词)发送给接口,可以用如下几个事件来解决这个问题。

事件触发时机
compositionstart在 IME 的文本合成系统打开时触发,表示输入即将开始
compositionupdate在新字符插入输入字段时触发
compositionend在 IME 的文本合成系统关闭时触发,表示恢复正常键盘输入

这里所说的几个事件正是 DOM3 Events 中所新增的合成事件

通过这几个事件,可以明确的知道键盘在输入框中的输入状态,是否正在候选中。合成事件和输入事件很相似,在合成事件在触发时,事件目标是接收文本的输入字段,唯一增加的事件属性是 data

事件data 的说明
compositionstart包含正在编辑的文本(比如,已经选择了文本但还没替换)
compositionupdate包含要插入的新字符
compositionend包含本次合成过程中输入的全部内容

那么,回到最开始的问题,如何过滤输入候选中。

// 是否候选中
let isHolder = false;
// 候选词内容
let holderValue;

input.addEventListener('compositionstart', (e) => {
  isHolder = true;
});

input.addEventListener('compositionupdate', (e) => {
  isHolder = true;
  holderValue = e.data;
});

input.addEventListener('compositionend', (e) => {
  isHolder = false;
  holderValue = '';
});
如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注