1、首先把input类型改为seach,并用form包裹起来
<form>
<input type="search" id="search-name" @keydown="onSearchIcon2($event)">
</form>
2、其次把form的自动提交,刷新页面阻止掉
<form @submit.prevent="formSubmit" action="javascript:return true">
<input type="search" id="search-name" @keydown="onSearchIcon2($event)">
</form>
3、在methods中自定义键盘事件、以及form的submit事件
onSearchIcon(){
console.log('搜索了')
},
onSearchIcon2(e){
if(e.keyCode == 13){
this.onSearchIcon();
}
},
formSubmit(){
return false;
},
就可以实现移动端的软键盘搜索功能
但是随之而来我们又会发现一个问题,就是type设置为seach的时候,舒服过程中,输入框内会出来一个默认的 “X”,它比较丑,影响美观,那我们就要把它给去掉。
此时我们就需要
input[type=search]::-webkit-search-cancel-button{
-webkit-appearance: none;/*此处只是去掉默认的小×*/
}