标签：user 参考 指定 .com out 页面 navigator 提取 内容
//这里区分不同系统，可以参考之前的文档记录 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却没有这个问题，后面会介绍处理的方式。
标签：user 参考 指定 .com out 页面 navigator 提取 内容
原文地址：https://www.cnblogs.com/wind-wang/p/10711259.html
