自定义事件：textchange

textchange应用场景

<input type="text" id="input">

$("#input").on("input", function(e){
    console.log(e.target.value)
})

中文输入法在输入拼音时就会触发input事件

input事件效果.gif

但是我们如果只想要在输入完（三生三世）再触发呢，这时的input事件已经不满足我们想要的效果了，我们可以用自定义事件textchange来代替

textchange事件效果.gif

compositionstart和compositionend事件处理中文输入

对于中文输入法，JS有两个处理事件：compositionstart和compositionend。

//输入法编辑器开始
$("#input").on("compositionstart", function(e){
    console.log("start")
})
//输入法编辑器结束
$("#input").on("compositionend", function(e){
    console.log("end");
    console.log(e.target.value)
})

compositionstart和compositionend效果.gif

现在我们有了处理中文输入法的方法，但是对于英文直接输入，还是要用keyup来处理

利用keyup兼容中英文输入法

//输入法编辑器开始
$("#input").on("compositionstart", function(e){
    $(this).data("ime", true)
})
//输入法编辑器结束
$("#input").on("compositionend", function(e){
    $(this).data("ime", false)
})
$("#input").on("keyup", function(e){
    if(!$(this).data("ime")){
        console.log(e.target.value)
    }
})

兼容粘贴paste事件

$("#input").on("paste", function(e){
    console.log(e.target.value)
})

总结代码

//输入法编辑器开始
$("#input").on("compositionstart", function(e){
    $(this).data("ime", true)
})
//输入法编辑器结束
$("#input").on("compositionend", function(e){
    $(this).data("ime", false)
})
$("#input").on("keyup", function(e){
    if(!$(this).data("ime")){
        console.log(e.target.value)
    }
})
$("#input").on("paste", function(e){
    //debugger;
    console.log(e.target.value)
})

jquery扩展方法

(function(b) {
    b.event.special.textchange = {
        setup: function(d, a) {
            b(this).data("ime", false);
            b(this).data("lastValue", this.contentEditable === "true" ? b(this).html() : b(this).val());
            b(this).bind("compositionstart", b.event.special.textchange.imeStartHandler);
            b(this).bind("compositionend", b.event.special.textchange.imeEndHandler);
            b(this).bind("keyup.textchange", b.event.special.textchange.handler);
            b(this).bind("cut.textchange paste.textchange input.textchange", b.event.special.textchange.delayedHandler)
        },
        teardown: function(a) {
            b(this).unbind(".textchange")
        },
        handler: function(a) {
            b.event.special.textchange.triggerIfChanged(b(this))
        },
        imeStartHandler: function(a) {
            b(this).data("ime", true)
        },
        imeEndHandler: function(a) {
            b(this).data("ime", false)
        },
        delayedHandler: function(d) {
            var a = b(this);
            setTimeout(function() {
                b.event.special.textchange.triggerIfChanged(a)
            }, 25)
        },
        triggerIfChanged: function(a) {
            if (!a.data("ime")) {
                var d = a[0].contentEditable === "true" ? a.html() : a.val();
                if (d !== a.data("lastValue")) {
                    a.trigger("textchange", [a.data("lastValue")]);
                    a.data("lastValue", d)
                }
            }
        }
    };
}
)(jQuery);

使用

$("#input").on("textchange", function(e){
    console.log(e.target.value)
})