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