如何过滤输入框中输入法候选状态
比较常见的场景，假如一个联想搜索框，如果在键盘输入候选过程中，并不想将这些关键词（候选词）发送给接口，可以用如下几个事件来解决这个问题。
| 事件 | 触发时机 |
|---|---|
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 = '';
});
- 本博客所有文章除特别声明外，均可转载和分享，转载请注明出处！
- 本文地址：https://www.leevii.com/?p=3079