拼音输入法的神奇 API丨onCompositionStart & onCompositionEnd

2022-12-08

原创字数统计: 390字 | 预计阅读时长: 1min

前言

　　最近开发遇到了一个很 tricky 的问题，直接上 gif，看了就明白了：

bug复现

　　可以明显看到，在搜狗拼音输入法还没有完成输入的时候就已经触发搜索了，此时根据拼音内容(一些英文)去搜索，会搜索不到任何结果，导致 Table 内显示空信息。

　　这明显不是我们想要的效果，我们所希望的应该是在输入法完成输入（按下空格或回车）后，再去触发搜索框的搜索。

解决方案

onCompositionStart & onCompositionEnd

　　这两个事件确实第一次接触，以 compositionstart event 为例：

MDN 对 compositionstart event 的解释

　　简单来说，搜狗拼音输入法就是图中所说的 IME(Input Method Editor) ，当开启一段 composition session 的时候就会触发这个事件，至于什么是 composition session 呢~

　　知道有这个 event 之后，一切也就豁然开朗了，我们可以引入一个 lock 变量，通过 onCompositionStart & onCompositionEnd 来维护；当且仅当 lock 为 false 的时候才触发搜索~

（伪）代码

<Input
  onChange={e => setInputVal(e.target.value)}
  onCompositionStart={() => setLock(true)}
  onCompositionEnd={() => setLock(false)}
/>

useEffect(() => {
  // 输入拼音的情况下，选择了文字才搜索，正在输入拼音时不触发搜索
  !lock && triggerSearch(inputVal);
}, [lock, inputVal]);

最终效果

总结

　　之前我一直以为这不是个前端范畴的问题，是系统层面的，事实证明还是认知局限呀🤣今后还是要多多学习，多多记录。

赏

感觉不错支持一下

本文作者： Victor Ye
发布时间： 2022年12月08日 14:17:45
本文链接： https://www.victoryeah.com/post/11426bbe.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！