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

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>