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

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

标签：

Html/CSS Html5 前端工具

前言

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

html代码

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

js代码

元素绑定方法调用

function searchList(){
  // do something
}

jquery监听

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

注意事项

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;
}