【转】H5 input search 提交事件
2024-08-27 19:29:35
欲实现一个文字搜索的功能,要求输入时,键盘回车按钮提示显示为“搜索”。效果如下:
开始~
input type=text并不能达到这种效果,google了一下,HTML5 增加的type=search可以做到(但需要input type=search外面包上一层带action属性的form)。
<div class="search-input-wrap clearfix">
<div class="form-input-wrap f-l">
<form id="searchForm" action="" class="input-kw-form">
<input type="searchInput" 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会有许多默认样式和行为,这次开发遇到的有:
但我们希望样式按照我们自定义的样式显示,并且各个手机上能统一。
于是几经google,得到答案:
设置input autocomplete="off"去掉弹出的下拉框;
将默认的“x”隐藏掉:
input[type="search"]::-webkit-search-cancel-button{
display: none;
}
针对ios 设置样式, 去除ios下input 椭圆形:
-webkit-appearance: none;
同时别忘记,如果提交搜索时想使用ajax,那么可以阻止表单的默认行为
$('#
searchForm
').on('submit', function(event){
//拦截表单默认提交事件
event.preventDefault();
//获取input框的值,用ajax提交到后台
var content = $('#searchInput
').val();
$.ajax()..........});
截图参考:https://segmentfault.com/a/1190000007765742
最新文章
- ASP.NET Web API 接口执行时间监控
- Onethink1.1 钩子和插件的使用!
- Linux搭建nfs服务器
- fgtyn
- Refusing to install webpack as a dependency of itself
- iis 发布静态 html 代码
- Python之多线程
- ACM: 敌兵布阵 解题报告 -线段树
- poj 1061 扩展欧几里得解同余方程(求最小非负整数解)
- 一些常用css技巧的为什么(二)我所理解的line-height
- grep线上环境精典案例后续
- js动态新增组合Input标签
- 让Myeclipse自动生成的get set方法 自动加上文本注释,并且注释内容包含字段中我们加的文档注释
- java安装和配置(3.18)
- 新增项目到GIT仓库中
- 往redis中存储数据是利用pipeline方法
- 数组 this.setData快捷赋值
- Navicat连接mysql(高级选项配置)
- sqlserver日期推算(年,季度,月,星期推算)
- UVa 10118 Free Candies (记忆化搜索+哈希)
热门文章
- Thread.suspend和println使线程死锁
- Android 源代码解析 之 setContentView
- Node.js:REPL(交互式解释器)
- Python中的traceback模块
- 【docker】python: can&#39;t open file &#39;helloworld.py&#39;: [Errno 13] Permission denied
- Gerapy 使用详解
- iterator和iterable的区别
- Super超级ERP系统---(4)采购管理--采购单创建
- 状态模式(state)C++实现
- delphi 用idhttp做web页面数据抓取 注意事项