input 输入框输入中文

input 输入框输入中文

问题描述

在input输入框输入中文时，需要即时查询出匹配输入内容的结果，一般我们会使用input事件监听用户输入事件，但是在输入汉语拼音时，也会触发input事件，前端就会不断发送请求，用户体验非常差劲。

解决方案

针对这种情况，给大家介绍一个简单易懂的好方法。代码如下：

function in2 () {
    var cpLock = false;
    $('#in2').on('compositionstart', function () {
        cpLock = true;
        console.log("中文输入：开始");
        $("span").text("kaishi");
        $(this).off("input");
    });
    $('#in2').on('compositionend', function () {
        cpLock = false;
        console.log("中文输入：结束")
        $("span").text("jieshu");
        console.log($(this).val().length);
        $(this).on('input', function () {
            if (!cpLock) {
                console.log($(this).val().length);
            }
        });

    });
}

原理：
当浏览器有非直接的文字输入时, compositionstart 事件会以同步模式触发.
当浏览器是直接的文字输入时, compositionend 会以同步模式触发.
当元素监听到 compositionstart 事件，给 input 中事件加锁，禁止 input中事件执行，
当元素监听到 compositionend 事件，给input中事件解锁，正常执行。