web前端

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

前言

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

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

html代码

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

js代码

  1. 元素绑定方法调用
function searchList(){
  // do something
}
  1. jquery监听
$('#searchFrom').bind('submit', function () {
  // do something
});

注意事项

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

公告

以后每月5、15、25号更新原创文章,内容不限,喜欢小编Javan的博客的可以点击关注,也可在下方评论留言,你喜欢什么内容,小编根据大家喜欢的内容尝试更新

(0)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注