手机端调用搜索键盘

2019-04-12 js 阅读量

本文主要记录下如何调用系统的搜索键盘，经过实际测试以下代码可以兼容 ios 和 Android 系统

大家可以用手机测试下我的 demo是否能正常调用系统的搜索键盘呢？

注意点： 必须在 input 输入框外用 form 表单包起来，并且要加”action”，否则在 ios 上键盘上无法弹出”搜索二字“

1
2
3

<form id="formid" action="#">
    <input name="name" id="search" type="search" placeholder="我是一个输入框"/>
</form>

监听搜索按钮： 通过键盘键值匹配监听用户点击搜索按钮

document.getElementById("search").addEventListener("keydown", function(e) {
    if (e.keyCode == "13") {
        alert("成功调用搜索框啦~");
    }
});

部分手机在搜索框聚焦时，会出现下图所示的打叉样式：

可通过以下代码去除自带叉号样式：

1
2
3

input::-webkit-search-cancel-button {
    display: none;
}