版权声明: https://blog.csdn.net/xiasohuai/article/details/84191249
html5 增加的type=search可以做到我们想要的手机端搜索框效果(但需要input type=search外面包上一层带action属性的form)
<div class="search-input-wrap clearfix">
<div class="form-input-wrap f-l">
<form action="" class="input-kw-form">
<input type="search" autocomplete="off" name="baike-search" placeholder="请输入关键词" class="input-kw">
</form>
<i class="iconfont if-message"></i>
<i class="iconfont if-close"></i>
</div>
<i class="search-cancel f-l">取消</i>
</div>
但type=search会有许多默认样式和行为,也就是兼容性bug。
- 会默认下拉框显示搜索历史记录;
- 输入时自动弹出“x”,“x”的样式在不同手机上,样式不同;
- IOS 手机上输入框为椭圆形.
但我们希望样式按照我们自定义的样式显示,并且各个手机上能统一。
问题1的解决方式:设置input autocomplete="off"去掉弹出的下拉框(搜索的历史记录);
问题2的解决方式:
input[type="search"]::-webkit-search-cancel-button{
display: none;
}
问题3的解决方式:
-webkit-appearance: none;
同时别忘记,如果提交搜索时想使用ajax,那么可以阻止表单的默认行为,因为from表单点击搜索会有默认请求行为:
方式一:
$("form").on("submit",function(event){//这里可以写获取最外层容器的class名或者标签名等等
if(/*验证通过*/1){
}else{
event.preventDefault();
//return false; 当然这里也可以返回false。
}
})
方式二:
<form action="" target="frameFile" onsubmit="return false;></from>