JS 按键监听 与 输入法候选词选择 冲突

遇到一个很有意思的事情记录一下~

是这样的，页面中的搜索框，输入内容后，会有个suggest提示，需要增加方向键监听，按下↓键的时候可以选择。但是当你输入中文的时候，输入法也会有候选词，这时候↓键就会冲突了。

附图：

解决方法

经过查找compositionstart和compositionend这两个方法刚好满足需求。
简单的说一下这两个方法的属性。

compositionstart

MDN文档地址: https://developer.mozilla.org/zh-CN/docs/Web/Events/compositionstart

解释：
文本合成系统如 input method editor（即输入法编辑器）开始新的输入合成时会触发 compositionstart 事件。

兼容性：

compositionend

MDN文档地址: https://developer.mozilla.org/zh-CN/docs/Web/Events/compositionend

解释：
当文本段落的组成完成或取消时, compositionend 事件将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。

兼容性：

实现

看了下vue的源码，也是通过这种方式来解决输入法按键冲突的问题。
https://github.com/vuejs/vue/blob/dev/dist/vue.js#L8482

最后 附上个jQuery实现

const $input = $('#ipt');
let composing = false;

$input
    .on('compositionstart', () => {
        composing = true;
    })
    .on('compositionend', () => {
        composing = false;
    })
    .on('keyup', () => {
        if (!composing) {
            // do something ...
        }
    })

ok 就这样~