天天看點

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;”>,等等。