• 在谷歌浏览器下vue的@input事件问题


    在谷歌浏览器下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)
    }
    },
    });

    },
    }

  • 相关阅读:
    firefox显示 您的连接不安全 解决办法
    【TweenMax】to():添加动画
    【TweenMax】实例TimelineMax
    【js】document.all用法
    【js】阻止默认事件
    【封装】【JS】getClassName方法、get class+id封装
    【HTML】html结构,html5结构
    【实例】原生 js 实现全屏滚动效果
    【音乐】播放器
    GO : 斐波纳契数列
  • 原文地址:https://www.cnblogs.com/liufeiran/p/12703647.html
Copyright © 2020-2023  润新知