H5监听键盘弹起收回，用法超简单！兼容Android、iOS。

引入以下代码，仅需2行代码即可监听！

/*** 兼容Android、iOS各浏览器* H5键盘监控弹出（KeyboardUp）、收起（KeyboardDown）事件定义* auth: huaicheng151201@163.com* time: 2020.11.20* 用法：* 与click事件的绑定用法无异，如：window.addEventListener("KeyboardUp",function() {//键盘弹起来了},false);window.addEventListener("KeyboardDown",function() {//键盘收起来了},false);**/
;(function(window){if(!window || !navigator) return;var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);var KeyboardUpEvent = document.createEvent("KeyboardEvent");KeyboardUpEvent.initEvent("KeyboardUp",true,true);var KeyboardDownEvent = document.createEvent("KeyboardEvent");KeyboardDownEvent.initEvent("KeyboardDown",true,true);if(isAndroid) {var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;window.onresize = function () {var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;if (resizeHeight - 0 < originalHeight - 0) {document.dispatchEvent(KeyboardUpEvent);} else {document.dispatchEvent(KeyboardDownEvent);}}} else if(isiOS){document.body.addEventListener('focusin', () => {document.dispatchEvent(KeyboardUpEvent);})document.body.addEventListener('focusout', () => {document.dispatchEvent(KeyboardDownEvent);})} else {throw "无法识别浏览器机型，请检查navigator.userAgent是否被重新定义过."}
})(window);

然后，需要在监听的地方：

window.addEventListener("KeyboardUp",function() {//"键盘弹起来了";
},false);window.addEventListener("KeyboardDown",function() {//"哎呀，键盘收起来了";
},false);

开心的玩耍去吧！！！

H5监听键盘弹起收回，用法超简单！兼容Android、iOS。相关推荐

H5软键盘弹起收回（IOS与Android）
IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...
Flutter实战项目-第八篇监听键盘弹起
概要监听应用软键盘收齐弹出一.WidgetsBindingObserver WidgetsBindingObserver类可以使用于监听页面的生命周期,根据用户时间需求响应响应时间. didCh ...
移动端h5唤起键盘_移动端H5监听键盘弹出和收起
const isIOS= /iphone|ipad|ipod/.test(ua); const isAndroid= /android/.test(ua);if(isIOS) { let isRese ...
uniapp 手写canvas海报（兼容android/ios/h5/微信小程序）
先上成功图 1.在父组件里面定义弹出层,并且调用子组件制作海报的方法 2.点击显示二维码调用子组件海报方法 showPoster(customerPostId) { // co ...
简单的android ios抓包技巧
android截包以前写过一个android截包方法,不太实用.最新发现一个实用的方式. (1).网页抓包工具 Chrome浏览器插件 FireBug 插件 HttpWatch Fiddler 在浏 ...
android 键盘弹出监听,奇技淫巧之-Android监听键盘弹出与隐藏事件
CaptainAndroid.png 相信看到这个标题,大家都会潜意识觉得:Activity中没有可以复写的方法么?或者说,没有什么listener可以让我们使用么? 抱歉,真的没有,我们潜意识都是以 ...
项目需求之Android 监听键盘的弹起和隐藏setVisibility(View.GONE)方法失效
最近比较忙咯,因为在做密码密码管理模块,所以一直在跟EditText打交道,我也写了几篇跟EditText有关的博客了,今天又遇到需求了,需要监听系统键盘的弹起和隐藏. 需求大致是这样的: 1.当键盘 ...
源码推荐：collectionView拖拽,仿凤凰FM iOS 局部监听键盘再也不会挡住输入框
UICollectionView拖拽移动单元以及本地保存(上传者:dengqi) UICollectionView拖拽移动单元以及本地保存,可以保存你上次移动的位置. 仿映客直播导航条(上传者:Coo ...
如何在ArcMap中监听键盘鼠标事件
昨天有个朋友想要实现一个功能,就是在ArcMap中编辑数据的时候,能够通过快捷键自动设置预定义的属性,比如,选中若干要素,按A键,就自动填充属性,按B键,则又自动填充另外的属性字段. 单就这个功能而言 ...

H5监听键盘弹起收回，用法超简单！兼容Android、iOS。

H5监听键盘弹起收回，用法超简单！兼容Android、iOS。相关推荐

最新文章

热门文章