js 监听手机端键盘弹出和收起事件

本文转自：https://www.cnblogs.com/shimily/articles/12197217.html

const ua = typeof window === 'object' ? window.navigator.userAgent : '';let _isIOS     = -1;
let _isAndroid = -1;export function isIOS() {if (_isIOS === -1) {_isIOS = /iPhone|iPod|iPad/i.test(ua) ? 1 : 0;}return _isIOS === 1;
}export function isAndroid() {if (_isAndroid === -1) {_isAndroid = /Android/i.test(ua) ? 1 : 0;}return _isAndroid === 1;
}

1、在ios中软键盘弹起时，仅会引起$(‘body’).scrollTop值改变，但是我们可以通过输入框的获取焦点情况来做判断，但也只能在ios中采用这个方案，

因为在android中存在主动收起键盘后，但输入框并没有失焦，而ios中键盘收起后就会失焦；

2、在android中软键盘弹起或收起时，会改变window的高度，因此监听window的onresize事件；

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

if (isAndroid()) {const innerHeight = window.innerHeight;window.addEventListener('resize', () => {const newInnerHeight = window.innerHeight;if (innerHeight > newInnerHeight) {// 键盘弹出事件处理alert("android 键盘弹窗事件");     } else {// 键盘收起事件处理alert("android 键盘收起事件处理")}});
} else if (isIOS()) {window.addEventListener('focusin', () => {// 键盘弹出事件处理alert("iphone 键盘弹出事件处理")});window.addEventListener('focusout', () => {// 键盘收起事件处理alert("iphone 键盘收起事件处理")});
}
//如果需要移除监听事件可以使用removeEventListener，但如果监听事件中使用的函数是匿名函数，可能移除事件没有任何效果，
可以将监听事件执行的函数，提取出来，使用函数名来指定
例如:window.addEventListener('focusout', focusoutFunc);function focusoutFunc (){/*.....*/} window.removeEventListener('focusout', focusoutFunc);  //移除事件

js 监听手机端键盘弹出和收起事件相关推荐

Android监听系统输入法键盘弹出显示与隐藏事件
Android监听系统输入法键盘弹出显示与隐藏事件有时候需要监听Android系统输入法的弹出显示事件,比如:微信聊天时,不管你当前在聊天中的什么位置(上滑查看消息历史),每当你点击输入框时,都会自 ...
h5如何动态获取键盘高度_js判断手机端键盘弹出从而调整输入框高度
键盘弹起后 body 会增加 class="openkey" 用 openkey 调整表单的高度,让其在上半屏显示完整的表单,避免被遮挡 $(function(){ w = $(w ...
js监听手机端的touch滑动事件
实现原理:获取触摸首尾2点的坐标,Math.atan2获得2点连成的直线与x轴正方向的夹角,从而得到滑动的方向! 原理图: <!doctype html> <html> < ...
Android软键盘弹出和收起的监听
Android软键盘弹出和收起的监听 1.直接调用 SoftKeyboardHelper softKeyboardHelper = softKeyboardHelper = new SoftKeybo ...
php手机网站底部导航代码,jQuery微信手机端底部弹出导航菜单列表代码
jQuery微信手机端底部弹出导航菜单列表代码 jQuery微信手机端底部弹出导航菜单列表代码是一款网页底部点击按钮弹出浮动的图标菜单列表的手机特效. js代码 function showList() ...
Swift--监听iPhone键盘弹出及隐藏事件
开发需求:对键盘弹出及隐藏事件进行监听需要通过NotificationCenter对键盘事件进行监听 //键盘即将弹出NotificationCenter.default.addObserver(s ...
iOS 16 修改第三方库实现监听 SwiftUI 中 sheet 弹出视图的下滑关闭动作
功能需求我们已经在 iOS 16 中 SwiftUI 防止弹出的 sheet 视图被下滑关闭(dismiss)的新解决方案这篇博文中介绍过如何在 iOS 16 中禁止用户下滑关闭弹出的 sheet ...
Android页面监听虚拟键盘弹出、收起
js 移动端关于页面布局,如果底部有 position: fixed 的盒子, 又有input,当软键盘弹出收起都会影响页面布局. 如图: 页面这时候Android可以监听resize事件,代码如下, ...
js防止安卓手机软键盘弹出挤压页面导致变形的方法
h5防止安卓手机软键盘弹出挤压页面导致变形的方法输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了 ...

js 监听手机端键盘弹出和收起事件

js 监听手机端键盘弹出和收起事件相关推荐

最新文章

热门文章