input-search中ios显示搜索按钮

一、键盘搜索按钮

一定要用form包裹并且加上action属性，这样手机的键盘就会出现搜索按钮。

<form id="SearchForm" action="">
  <input id="searchInputId" type="search" value=""  class="searchInput" placeholder="请输入商品关键词"/>
</form>

// 回车搜索
$("#SearchForm").submit(function(e){
    e.preventDefault()
    e.stopPropagation()
    let searchVal = $("#searchInputId").val();
    window.location.href = './shopList.html?name='+searchVal;
})

image.png

二、去掉ios自带的搜索icon

由于input type 是 search，所以ios会自带一个搜索icon，安卓则没有。所以最好自己写一个 隐藏ios的icon

input[type="search"]{-webkit-appearance:none;} 
input::-webkit-search-cancel-button {display: none;}

去掉前

image.png

去掉后

image.png