//这里区分不同系统
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); //移除事件