前言

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

H5中input输入框如何实现原生键盘搜索功能

html代码

<form action="javascript:;" id="searchFrom" onsubmit="searchList"> <input type="search" value="" placeholder="搜索Javan的博客" /></form>

元素绑定方法调用

function searchList(){ // do something}

jquery监听

$('#searchFrom').bind('submit', function () { // do something});

H5中input输入框如何实现原生键盘搜索功能

注意事项action="javascript:;"这里的作用是，防止页面刷新，如果不写，页面会刷新type="search""input的类型需要是searchinput输入框必须放到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;}

喜欢小编的点击关注，了解更多资源！