解决 H5 IOS input 聚焦时，软键盘将页面整个推上去，键盘收起页面未下移 BUG

问题描述

近日在开发H5应用时，测试人员发现在IOS低版本中input，textArea等输入框聚焦时，软键盘弹起会将整个页面向上顶，收回键盘后，页面不会回弹恢复页面，导致页面下方产生大量空白。

解决方案

在页面中添加以下js即可解决：

// 解决 H5 IOS input 聚焦时，页面整个被推上去了，键盘收起页面未下移 BUG
$(function () {
	(/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener('blur', event => {
		// 当页面没出现滚动条时才执行，因为有滚动条时，不会出现这问题
	    // input textarea 标签才执行，因为 a 等标签也会触发 blur 事件
	    if (
	        document.documentElement.offsetHeight <=
	        document.documentElement.clientHeight &&
	        ['input', 'textarea'].includes(event.target.localName)
	    ) {
	        document.body.scrollIntoView() // 回顶部
	    }
	}, true);
});