学习总结——h5搜索框input回车自动搜索，及IOS X及以上h5 input页面切换后显示内容丢失fix

如题，最近做移动端h5的一个搜索功能，使用了input标签，常规的功能（输入搜索词、键盘回车键/search键按下触发搜索）类似这样

构建h5搜索框input回车自动搜索搜索框代码如下，type=search后键盘上会出现搜索/search键，按下需要包裹form表单承接事件，keyup.13是键盘回车/搜索键按下后光标失焦设置。

 <form
    action=""
    class="input-form"
    @submit.prevent="search"
 >
    <input
         class="search-input"
         placeholder="请输入搜索关键词"
         type="search"
         v-model="query"
         autocomplete="off"
         @keyup.13="onSearchKeyDown"
   />
</form>

由于search类型的input自带了搜索标识和清除标识，如果有自定义样式需要的可以添加如下样式代码，然后自定义搜索框样式

// IOS下移除原生样式
-webkit-appearance: none;
// 自定义placeholder颜色和字号
input::-webkit-input-placeholder{
    color: #ccc;
    font-size: 45px;
}
// 不显示搜索标识，自行添加搜索放大镜
input[type="search"]{-webkit-appearance:none;}
    [type="search"]::-webkit-search-decoration {
    display: none;
}
// 不显示清空按钮，自行添加input后面的x清空文本
input::-webkit-search-cancel-button {display: none;}

测试时候发现灵异现象（iphone xr及以上机型），如果已经键入了搜索词，然后页面上有其他内容跳转了不是同域名下的其他页面，页面返回原搜索页后，输入的query搜索词在搜索框input中不显示（iphone xr以上机型稳定复现），ಥ_ಥ

为了排查这个问题，在页面上打印了绑定的query值，并且查看了返回后的页面路由，query词都是有值的~所以只能从代码本身找原因

科学探究就是要乐此不疲，解决探究如下：

1、判断是不是ios本身input的问题——新建一个最简单的input，赋值，页面跳转返回后未丢失，input本身无问题

2、判断是否是样式层级的问题——查看只显示了placeholder，设置的按钮等绝对定位的大小合适，无遮挡，去除样式class后扔稳定复现，非样式层级问题

3、那就是search input自己的问题了，本着变量单一探究法，我对红框中的属性逐个删除，这回发现了问题所在，mdn对于此属性的描述（<input>：输入（表单输入）元素 - HTML（超文本标记语言） | MDN）不过加了off后在某些情况下仍会失效，解决办法，移除了autocomplete="off"属性或者修改为autocomplete="no"(on/off之外的其他值，此外不同的使用场景，官网文档中还有许多特定场景的值设置，可以根据自己的需要进行设置)，此问题不再复现，问题解决

 修改后代码如下：

 <form
    action=""
    class="input-form"
    @submit.prevent="search"
 >
    <input
         class="search-input"
         placeholder="请输入搜索关键词"
         type="search"
         v-model="query"
         autocomplete="no"
         @keyup.13="onSearchKeyDown"
   />
</form>