vue移动端项目搜索框实现键盘事件

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;/*此处只是去掉默认的小×*/
}

就可以去掉默认的小X号

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容