手机端调用搜索键盘

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

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

Html

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

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

js

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

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

优化点

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


搜索框自带×样式

可通过以下代码去除自带叉号样式:
1
2
3
input::-webkit-search-cancel-button {
display: none;
}

Copyright ©2019 guowj All Rights Reserved.

访客数 : | 访问量 :