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

问题

登录页面，输入验证码的时候，自己在代码里加了对Enter键的监听，导致与输入法冲突。具体现象是：验证码是英文的，用中文输入法输入，在有候选字的情况下按Enter，这时先触发登录，没有先转化为code。

如图

FinalVideo_1622033824.952332.gif

资料

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

compositionstart

MDN文档地址: https://developer.mozilla.org/zh-CN/docs/Web/Events/compositionstart
解释：
文本合成系统如input method editor（即输入法编辑器）开始新的输入合成时会触发 compositionstart 事件。

MDN文档地址: https://developer.mozilla.org/zh-CN/docs/Web/Events/compositionend
解释：
当文本段落的组成完成或取消时, compositionend 事件将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。

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

实现

1. jQuery实现

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

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

2. vue的demo

   
   
   
   
       
       
   
   
   
   
       
   
           
   Enter键与输入法候选词
           
   
               开启composing判断
           
           
   
               
   
                   
   
                       
   
                           用户名
                           
                       
                       
   
                           用中文输入法输入zhongwen
                           
                       
                       登录
                   
               
           
           
   
               
   {{log}}