input搜索框在ios系统中兼容问题

input搜索与ios适配兼容问题场景：h5页面在手机上嵌入时，会有搜索框并且改变键盘“搜索”字体的需求问题1：ios下input中type=“search”，键盘中不变“搜索”的问题<inputtype="search"placeholder="搜索生"v-model="searchValue"@keypress.13="goSearch()"/>解决：在input标签的外面嵌套f

栗子同学lz

2683人浏览 · 2021-11-24 16:53:16

栗子同学lz · 2021-11-24 16:53:16 发布

input搜索与ios适配兼容问题

场景：h5页面在手机上嵌入时，会有搜索框并且改变键盘“搜索”字体的需求

问题1：ios下input中type=“search”，键盘中不变“搜索”的问题

 <input 
        type="search" 
        placeholder="搜索生" 
        v-model="searchValue"
        @keypress.13="goSearch()"
      />

解决：在input标签的外面嵌套form，且必须有action属性

 <form action=""  style="width:96%">
      <input 
        type="search" 
        placeholder="搜索" 
        v-model="searchValue"
        @keypress.13="goSearch()"
      />
      </form>

问题2：出现新的问题，form的提交会导致页面第一次搜索时自动刷新页面

解决：在form属性中阻止表单的提交

 <form action="javascript:return true;" @submit.prevent="" style="width:96%">
      <input 
        type="search" 
        placeholder="搜索" 
        v-model="searchValue"
        @keypress.13="goSearch()"
      />
      </form>