//这里区分不同系统,可以参考之前的文档记录 https://www.cnblogs.com/wind-wang/p/10737110.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); //移除事件
处理完键盘弹出和收起事件后,会发现在ios中键盘收起时,页面内容留白不下滑,滑动下,又恢复正常。android却没有这个问题,后面会介绍处理的方式。
原文地址:https://www.cnblogs.com/wind-wang/p/10711259.html
时间: 2024-10-27 19:30:24