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

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

　　注意事项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;}

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

　　94%的朋友还想知道的：

　　键盘怎么自定义改键软件（手机键盘怎么自定义改键）

　　微信小程序如何获取input文本框输入值（微信小程序input输入框）

　　微信小程序文本输入框（微信小程序textarea的属性）

　　html文本输入框提示文字（文本框如何实现类似html的输入提示信息）



　　154616
 

版权声明：本站所有文章皆为原创，欢迎转载或转发，请保留网站地址和作者信息。

很赞哦！ ()