js对手机键盘事件的监听

发布时间:2025-06-25 17:31

酒精可快速消毒手机和键盘 #生活常识# #生活琐事# #清洁剂#

最新推荐文章于 2023-07-24 07:39:43 发布

程子cyp 于 2018-07-19 16:21:38 发布

js还没有办法对手机软键盘直接进行监听的,但是可以有其他角度来判断软键盘是否弹起。比如输入框是否获取焦点等。

focusin和focusout支持冒泡,对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡,focus和blur不会冒泡,这样就可以使用事件代理,处理多个输入框存在的情况。

$(document).on('focusin', function () {

  //软键盘弹出的事件处理

});

$(document).on('focusout', function () {

 //软键盘收起的事件处理

});

但是,实际中发现这种方法仅在ios上有效,键盘弹出和键盘收起与输入框的focusin和focusout一一对应。
在android中,点击键盘上的收起按钮,键盘虽然收起了,输入框仍然处于焦点状态,并没有触发focusout事件。

经实践,发现一种变通的方法。通过比较window resize后的clientHeight与最初进来页面时的clientHeight进行对比,如果小于最初的值,那么就可以认为是键盘弹出,否则,认为键盘收起。


在android中键盘弹出和收起会改变window的高度,因此监听window的resize。

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

$(window).on('resize', function () {

var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;

if (clientHeight > nowClientHeight) {

//键盘弹出的事件处理

}

else {

//键盘收起的事件处理

}

});

html

网址:js对手机键盘事件的监听 https://www.yuejiaxmz.com/news/view/1090273

相关内容

聊聊JS DOM变化的监听检测与应用 « 张鑫旭
JS+CSS3实现的窗帘式图片切换特效教程
uniapp 如何禁止或监听默认返回事件
一键控制,轻松实现!手机远程监控电脑的操作技巧
cocoscreator 手机返回键监听
机械键盘保养及清洁
远程监控软件什么软件可以远程控制手机
JS打开应用程序与软件,探索背后的技术与逻辑
Windows实用技巧:深度清理C盘垃圾文件的实战方案
JScript手册与JS手册App,探索现代前端开发的新路径

随便看看