遇到一个很有意思的事情记录一下~
是这样的,页面中的搜索框
,输入内容后,会有个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 就这样~