Vue移动端安卓-ios显示软键盘搜索按钮,回车触发搜索事件
目录
[Vue]移动端安卓 ios显示软键盘搜索按钮，回车触发搜索事件
参考：
原始写法
<input type="text" class="iconfont searchInput" v-model="keywords" placeholder="搜索">
<button class="SearchBtn" @click="search">搜索</button>
methods: {
search(){
console.log("搜索事件");
}
}安卓触发软键盘的搜索按钮
<input type="search" class="iconfont searchInput" v-model="keywords" placeholder="搜索">
<button class="SearchBtn" @click="search">搜索</button>苹果ios，与安卓搜索按钮兼容写法
<form action="javascript:return true" @submit.prevent="formSubmit">
<input type="search" class="iconfont searchInput" v-model="keywords" placeholder="搜索" @keydown="searchTo($event)">
</form>
<button class="SearchBtn" @click="search">搜索</button>
methods: {
search(){
console.log("搜索事件");
},
formSubmit () {
return false;
},
searchTo(){
if(event.keyCode==13){ //键盘回车的编码是13
this.search();
}
}
}1.修改input type=“search”
<input type="search" class="iconfont searchInput" v-model="keywords" placeholder="搜索"2.添加form，阻止默认事件
<form action="javascript:return true" @submit.prevent="formSubmit"></form>
formSubmit () {
return false;
}3.input type=“search"的 按键事件调用搜索@keydown=“searchTo($event)”
searchTo(event){
if(event.keyCode==13){ //键盘回车的编码是13
this.search();
}
}