VUE 软键盘回车触发搜索事件
代码如下
<div>
<img src="../../assets/img/fdj.png" alt="">
<input type="text" v-model="content" >
</div>
<span @click="search()">搜索</span>
methods :{
search(){
alert("你想搜索") //这里是搜索事件的方法内容
}
}
移动端在涉及到搜索事件的时候,一般都希望 弹出的软键盘的回车也能直接触发搜索事件~ 下边就来看看怎么调用软键盘的回车键
1、html中
a. input的type改为search,再写keydown按下时的事件调取搜索事件的方法,
(这样安卓的就可以看到回车键变成了“搜索” 二字,而且直接敲回车也是可以调搜索事件的。但是问题是,ios系统,虽然可以敲回车调事件,但是回车键仍然是“换行”二字,并没有变成“搜索”二字。那么解决这个问题 就需要加上第b和c步)
b. input 外面套form,必须要有action,action=“javascript:return true”
c. 表单提交阻止默认提交事件,(methods加上阻止事件)
(这样完整写下来,ios系统的软键盘 就可以看到“换行”回车键已经变成了“搜索”二字了)
<div>
<img src="../../assets/img/fdj.png" alt="">
<form @submit.prevent="formSubmit" action="javascript:return true">
<input type="search" v-model="content" @keydown="search2($event)">
</form>
</div>
<span @click="search()">搜索</span>
2.methods 方法中
methods:{
formSubmit () {
return false
}
search(){
alert("你想搜索") //这里是搜索事件的方法内容
}
search2(ev){
if(ev.keyCode == 13) { //键盘回车的编码是13
this.search();
}
},
}
3.关键点总结
1.input type=“search” keydown回车 绑定搜索事件
2.input 外面套form,必须要有action,action=“javascript:return true”
3.表单提交阻止默认提交事件,
上边给出了vue中的写法,
附带:jquery写法
$("form").submit(function(){
return false
})