在谷歌浏览器下vue的@input事件问题:input输入中文,在输入拼音的时候就在触发(360不这样)
原文链接:https://blog.csdn.net/m0_37817986/article/details/103079249
<input v-on:input="searchOne($event,item.ind)" v-on:compositionstart="flagg=false" v-on:compositionend="flagg=true" autocomplete="off"/>
var app = new Vue({
el: '#app',
data: {
flagg:false
},
methods: {
searchOne:function(event,ind){
//console.log(this.flagg);
var _this = this;
// setTimeout(function(){
if(this.flagg){
_this.kemuSearch(ind);
}
//因为选词结束的时候input会比compositionend先一步触发,此时flag还未调整为true,所以不能触发到console,故用setTimeout将其优先级滞后。
// },0)
//这个事件是input在360和谷歌两个效果不一样,用change只能在失去焦点的时候触发
},
kemuSearch: function (num) {
var self = this;
this.flag = 0;
var _IsLastLevel = 1;
//这里是表单每次变化的值,可能只能为空时才能去请求
//这里应该是键盘实时搜索,鼠标也用到这个方法
var _SearchKey = $("#text" + num).val();
$.ajax({
type: 'POST',
url: "/IncreaseCredit/Subject_GetList",
data: {
IsLastLevel: _IsLastLevel,
SearchKey: _SearchKey
},
dataType: "json",
async:false,//这里要改成同步的,否则没有查询完就去干别的了
success: function (msg) {
if (msg.status.code == "1") {
app.list = [];
//list提供一个临时容器,存请求回来的列表值
for (var i = 0; i < msg.row_data.record.length; i++) {
app.list.push(msg.row_data.record[i]);
}
if(self.list.length>0){
self.flag = 1;//当有值的时候改为1,让下拉框显示
}else{
//实时查询,当没有值的时候不要显示空框
$('.out').css({ 'display': 'none'})
}
// for (var i in msg.row_data.record) {
// app.list.push(msg.row_data.record[i]);
// }
//console.log(app.list)
}
},
});
},
}