inputtype=search实现搜索以及兼容性问题
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。
1. 会默认下拉框显⽰搜索历史记录;
2. 输⼊时⾃动弹出“x”，“x”的样式在不同⼿机上，样式不同；
3. 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。
}
})
input标签placeholder属性⽅式⼆：
<form action="" target="frameFile" onsubmit="return false;></from>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。