html5搜索框
2017-02-13 09:19
288 查看
实现一个文字搜索的功能,要求输入时,键盘回车按钮提示显示为“搜索”。
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会有许多默认样式和行为:
默认下拉框显示搜索历史记录
输入时自动弹出“x”,“x”的样式在不同手机上,样式不同
IOS 手机(测试时为iphone6 ios10)上输入框为椭圆形
解决方案:
设置input autocomplete="off"去掉弹出的下拉框;
将默认的“x”隐藏掉:
input[type="search"]::-webkit-search-cancel-button{
display: none;
}针对ios 设置样式, 去除ios下input 椭圆形:
如果提交搜索时想使用ajax,那么可以阻止表单的默认行为:
container.on('submit', '.input-kw-form', function(event){
event.preventDefault();
})
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会有许多默认样式和行为:
默认下拉框显示搜索历史记录
输入时自动弹出“x”,“x”的样式在不同手机上,样式不同
IOS 手机(测试时为iphone6 ios10)上输入框为椭圆形
解决方案:
设置input autocomplete="off"去掉弹出的下拉框;
将默认的“x”隐藏掉:
input[type="search"]::-webkit-search-cancel-button{
display: none;
}针对ios 设置样式, 去除ios下input 椭圆形:
-webkit-appearance: none;
如果提交搜索时想使用ajax,那么可以阻止表单的默认行为:
container.on('submit', '.input-kw-form', function(event){
event.preventDefault();
})
相关文章推荐
- HTML5新控件 - 搜索框
- HTML5实践 -- 可伸缩的mobile搜索框
- html5 搜索框
- 第八十八节,html5+css3pc端固定布局,搜索区,插入大图,搜索框
- HTML5 搜索框input [type=search]
- HTML5带有语音的搜索框
- HTML5基础,第4部分:点睛之笔Canvas
- win8全局搜索该如何设置(2种方法调出搜索框)
- 使用 HTML5 WebGL 实现逼真的云朵效果
- HTML5 Camera(摄像头) 和 Video(视频)控制
- html5 - 地图
- 用html5和js制作一个游戏启动界面(html5游戏开发一)、
- 【HTML5校企公益课】第二天
- JQuery_ select2的搜索框不能输入搜索内容
- html5 javascript canvas API 绘制树形图案A
- html5标签
- HTML4和HTML5之间10个关键的不同之处
- HTML5之音频功能
- 移动端html5开发关于用js检测用户设备
- HTML5选择器