h5 input 修改換行為搜素

最近做移動端頁面，幾個簡單頁面，有搜尋清單，加載更多功能。用到了 input type=“search”.

input search 相關注意點

• 它在各個浏覽器展示的樣式的樣子不一樣，特别是那個删除按鈕×，是以會重置它的樣式，自定義删除按鈕。

/*去掉預設的搜尋小圖示*/
input[type="search"]::-webkit-search-decoration{
    display: none;
}
/*去掉預設的x*/
input[type="search"]::-webkit-search-cancel-button{
    display: none;
}
/*去掉ios下的圓角*/
input[type="search"]{
    -webkit-appearance: none;
}
           

• 如果你不喜歡預設自帶的彈窗清單，可以設定input的屬性autocomplete=“off”
• 移動端，你發現彈出的鍵盤顯示換行而不是搜尋時，在外面套個form表單就行。

<form action="" id="search_form">
    <input type="search" name="search" id="search">
</form>
           

• 其中form必須有action屬性。
• 因為你加了form表單，但是很多時候不想表單送出跳轉，可以阻止表單預設行為：

$('body').on('submit', '#search_form', function(event){
    event.preventDefault();
    //todo ...
})
           

• 當然，也可以用其他的方法來阻止表單跳轉：比如：action=“javascript:return true;”，或其他方法<form οnsubmit=“return false;”>，等等。