手机端浏览器中的html搜索框如何响应软键盘搜索按钮事件？

Posted 2023-03-26

用html5做一个手机端浏览的网页。里面有个搜索框(input='search'), 想和baidu等网站一样不单独加一个搜索按钮在页面上，而是使用输入法软键盘里的搜索按钮或图标来触发事件。javascript里面如何响应这个搜索按钮事件？ 有什么独特的事件么？ 谢谢！

很简单，input框外面加form表单即可。 

<form><input type="" /></form>

参考技术A 其实就是按键响应事件onkeypress 按键编码为13
$("#keyword").on('keypress',function(e)
var keycode = e.keyCode;
var searchName = $(this).val();
if(keycode=='13')
e.preventDefault();
//请求搜索接口

);
电脑端也是可以用的，这时不会弹出键盘，物理键盘中的enter键的作用等同于搜索按钮。 参考技术B 首先不确定是是否这个搜索用了ajax，这其实就类似PC端的keydown,keypress事件只不过PC端有时候要判断是否是回车键而已，手机端的话
<form action="#"> <input type="search" /> <input type="submit" id='searchBtn'/> </form>
$('#searchBtn').on('submit', function(e)
... //搜索 ); 参考技术C <form method="post">
<input type="text" />
<input type="submit" />
</form>

先添加form，ajax请求时需要阻止form的默认提交事件

参考技术D document.onkeyup = function (e)
var code = e.charCode || e.keyCode;
if (code == 13)
在这里写事件就行了

安卓手机底部输入框被软键盘遮挡的坑

参考技术A 最近在做用户端客服对话系统，遇到一个很坑的事情--在oppo A53 5G安卓手机浏览器及webview上，底部position为fixed的输入框被手机软键盘给遮挡了，小米手机及iphone没有问题。下图分别为底部输入框被遮挡及底部输入框没有被遮挡的情况：

题外话：
1、客服对话系统注意考虑到不能太短的心跳时间，因为用户可能切换到后台长时间选择文件上传。