美文网首页
vue移动端项目搜索框实现键盘事件

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

作者: 勤能补拙的笨小孩 | 来源:发表于2020-04-16 18:33 被阅读0次

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号

相关文章

网友评论

      本文标题:vue移动端项目搜索框实现键盘事件

      本文链接:https://www.haomeiwen.com/subject/jbpdvhtx.html