input输入框的input事件

首先是一个坑，在IE和360浏览器中页面刷新会执行一遍input事件，在其他浏览器就没有，所以会有很大问题，导致做的自动补全列表直接显示，刷新页面也不能隐藏。

<input type="text" class="comHeaderBanSearchSearch fl" placeholder="请输入关键字查询" v-model="inputVal" @keyup.enter="searchBtn">//在data中 我直接把inputVal的值拿到路由的值 这样页面一进来就不用走watch了 这样就避免了在created中赋值 是inputVal变化从而进行监听 还会走自动补全的函数了
data(){
return {
inputVal:this.$route.query.searchWord?this.$route.query.searchWord:'',
}
}//监听 watch中
watch:{
inputVal(newVal,oldVal){this.inputChange();},
},
methods:{/*自动补全数据 methods*/inputChange() {if(this.inputVal!=''){getsuggestAPI({term: this.inputVal,num: 8}).then(res => {if (res.data.status) {this.suggest = res.data.data;this.issuggest=true;this.$store.commit('suggest',this.issuggest)}})}else{this.suggest=[];this.issuggest=false;this.$store.commit('suggest',this.issuggest)}},
},

input输入框的input事件相关推荐

input输入框的input事件和change事件
input输入框的onchange事件,要在 input 失去焦点的时候才会触发: 在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发: onchange 事件也可用于单选框与 ...
input输入框的原生事件
1.@clik 点击事件,鼠标点击输入框时触发 2.@focus 聚焦,鼠标光标聚焦在输入框内时触发 3.@blur 失去焦点,鼠标光标焦点从输入框内移除,不能再输入内容后触发 4.@change 输 ...
react： input 输入框中文onChange事件异常问题对input输入进行防抖处理
当我们使用Input时,我们可能会遇到一个问题,比如需要对用户输入的内容进行搜索时,当用户处于中文输入时,明明没有对内容进行确认,为什么会触发了onChange事件呢? 比如以下场景,中文一边输入另外 ...
前端基础JS——input输入框的oninput事件和onchange事件
在开发过程中,input用的比较多的是change事件,忽略了还有input事件. onchange--input输入过程中不会触发,失去焦点时才会触发: 兼容性:所有浏览器都支持,可以用于& ...
input输入框的各种事件
1.onblure 输入框失去焦点时触发 2.onchange 输入框里面内容发生改变切失去焦点时触发 3.oninput 输入框里面内容发生改变(且不用失去焦点)时触发 4.onpropertych ...
input 输入框监听@input
监控 input 输入框 @input 获取输入数据报错:Cannot read property 'detail' of undefined at VueComponent 使用 input 输入框 ...
input元素的oninput事件和onchange事件
input元素的oninput事件和onchange事件框架用多了,感觉原生的有点弱化了,不说了,是时候巩固一波了 ^ _ ^ 1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加 ...
js实时监听input输入框值的变化以便即使匹配搜索项
问题说明在含有搜索框的网页中,经常需要及时匹配搜索项,因此需要监听input输入框的变化事件.如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,除了监听 ...
input输入框限制（座机，手机号码）
记录一下座机input输入框: <input style="width:100px;" id="tel" type="text" o ...

input输入框的input事件

input输入框的input事件相关推荐

最新文章

热门文章