前言
在H5开发中，经常会开发搜索功能，商品列表、订单列表、客户列表等等，都需要搜索，所以程序猿（程序媛）们都会遇到这样的需求，点击搜索input时，弹出的键盘，有“搜索”按钮，点击搜索调用接口搜索。今天就来讲讲怎么搞定这个需求。
H5中input输入框如何实现原生键盘搜索功能
html代码
<form action="javascript:;" onsubmit="searchList"> <input type="search" value="" placeholder="搜索Javan的博客" /> </form>
js代码
元素绑定方法调用
function searchList(){
// do something
}
jquery监听
$('#searchFrom').bind('submit', function () {
// do something
});
H5中input输入框如何实现原生键盘搜索功能
注意事项
- action="javascript:;"这里的作用是，防止页面刷新，如果不写，页面会刷新
- type="search""input的类型需要是search
- input输入框必须放到form表单中
- 这样写input框输入值后，会有清除按钮，需要改变样式，或者去除，请看下方代码
input[type=search]::-webkit-search-cancel-button{
-webkit-appearance: none; // 此处只是去掉默认的小×
}
自定义样式
input[type=search]::-webkit-search-cancel-button{
-webkit-appearance: none;
position: relative;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #EBEBEB;
}
input[type=search]::-webkit-search-cancel-button:after{
position: absolute;
content: 'x';
left: 25%;
top: -12%;
font-size: 20px;
color: #fff;
}
相关推荐
-
OPPO Pad和vivo Pad有什么区别（OPPO平板和vivo平板对比）
2022年2月24日，OPPO正式推出旗下第一款平板电脑「OPPO Pad」，随后相关的业内人士表示vivo也将推出首款平板电脑，2022年的平板电脑市场竞争将会更加激烈。4月11日，vivo首款平板电脑「vivo Pad」如期而至，vivo Pad...
-
汉族及其传统节日有哪些（汉族的传统节日罗列）
（1）汉族概况 汉族不仅是中国，也是全世界人口最多的民族。 汉语属汉藏语系，是世界上历时最悠久、最丰富的语言之一。 天命崇拜、祖先崇拜是汉族宗教信仰的传统观念。 对汉族民居影响最大的莫过于“风水术”定下的范...
-
提高seo关键词排名（关键词快速排名seo怎么优化）
1：关键词优化的重要性 关键词优化对于网站的排名是非常重要的，这是因为关键词优化能够帮助网站在搜索引擎中获得更好的排名。而且，关键词优化还有助于提高网站的流量，因为当用户在搜索引擎中搜索关键词时，优化过...
-
电脑怎样高清录屏（电脑怎么录屏清晰度高）
关注职场办公，分享实用干货，洞察科技资讯，这里是「职场科技范」。 经常用电脑办公、游戏、上网课，都会用到录屏，那么电脑如何高清录屏呢？我只推荐下面这2种方法，真是太好用了。 一、ScreenToGif（无声录制） ...
-
文言文固定句式汇总例句（文言文固定句式汇总大全）
固定句式也叫固定结构或凝固结构。它的语法特点就是由一些不同词性的词凝结在一起，固定成为一种句法格式，表达一种新的语法意义，约定俗成，经久不变。熟练地掌握这些句式，可以收到事半功倍的效果，对快速...
-
时间怎么表现（时间是怎么出现的）
早在人类出现之前，时间就已经存在了。时间伴随着人们走过所有的历史进程，只要世界不停止，时间就不会停下它的脚步。 我们对时间是如此熟悉，但又无法确切地说出时间到底是什么；我们知道时间的单位，却不知道它到...