H5软键盘缩回、弹起回调

由于H5没有直接监听软键盘的原生事件，只能通过软键盘的弹起、收回进行相应操作，并且Android、IOS表现有所不同。

代码如下：

function h5Resize(downCb, upCb) { 
	const clientHeight = window.innerHeight;
	const ua = window.navigator.userAgent.toLocaleLowerCase();
	const isIOS = /iphone|ipad|ipod/.test(ua);
	if(isIOS){
		document.body.addEventListener('focusin', () => {
			upCb();
		})
		document.body.addEventListener('focusout', () => {
			downCb();
		})
		return;
	}
	window.addEventListener('resize', () => {
		let height = window.innerHeight;
		if (height === clientHeight) {
			downCb();
		}
		if (height < clientHeight) {
			upCb();
		}
	});
};

代码说明:

在Android和IOS上，软键盘弹起和收起状态存在差异，事件不同。

在IOS上，可以监听聚焦和失焦事件来判断键盘的状态。

在Android上，通过window.onresize事件来监听页面高度变化可以判断键盘的状态。

链接: https://fly63.com/course/34_1646