H5中input输入框如何实现原生键盘搜索功能（h5页面输入框和键盘）

前言在H5开发中，经常会开发搜索功能，商品列表、订单列表、客户列表等等，都需要搜索，所以程序猿（程序媛）们都会遇到这样的需求，点击搜索input时，弹出的键盘，有“搜索”按钮，点击搜索调用接口搜索。今天就来讲讲怎么搞定这个需求。

h5页面输入框和键盘

前言

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输入框如何实现原生键盘搜索功能

注意事项

1. action="javascript:;"这里的作用是，防止页面刷新，如果不写，页面会刷新
2. type="search""input的类型需要是search
3. input输入框必须放到form表单中
4. 这样写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;}

上面就是小居数码小编今天给大家介绍的关于（h5页面输入框和键盘）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

• 键盘怎么自定义改键软件（手机键盘怎么自定义改键）
• 微信小程序如何获取input文本框输入值（微信小程序input输入框）
• 微信小程序文本输入框（微信小程序textarea的属性）
• html文本输入框提示文字（文本框如何实现类似html的输入提示信息）

（223）个朋友认为回复得到帮助。