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)
})
