中文输入法下的input、compositionstart与compositionend，实现中文输入法下，仅在选词后触发input事件

中文输入法下的input、compositionstart与compositionend，实现中文输入法下，仅在选词后触发input事件。

描述

在使用 oninput 监控输入框内容变化时，我们期望仅在value值变化时，才触发 oninput 事件，而在中文输入下，未选词时的按键也会触发* oninput* 事件。

关键

• compositionstart 事件
• compositionend 事件

方法

使用一个变量表示拼写状态，在 oninput 事件中判断是否在拼写状态，当拼写状态结束，继续执行下一步操作。

var inputLock= false;
$('#ipt').on('compositionstart',function(){
    inputLock= true;
})
$('#ipt').on('compositionend',function(){
    inputLock= false;
})
//oninput在oncompositionend之前执行，需加加延迟，是为了等compositionend将inputLock改为false
$('#ipt').on('input',function(){
    setTimeout(function() {
        if(!inputLock) {
            //To do something...
        }
    },0);
})

也可以整合在一起

    let inputLock = false;
    $('#ipt').on({
        'compositionstart': function () {
            inputLock = true;
        },
        'compositionend': function () {
            inputLock = false;
        },
        'input': function () {
            setTimeout(() => {
                if (inputLock) return;
                console.log('中文事件')
            }, 0);
        }
    })