处理 ios端输入框拉起键盘页面上移的问题

最新推荐文章于 2025-09-07 15:55:13 发布

原创最新推荐文章于 2025-09-07 15:55:13 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ios #ipad #iphone

问题总结专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种解决方案，用于修复iOS设备上H5页面中input元素聚焦时页面位置异常变动的问题。该方案通过监听blur事件并检查页面是否出现滚动条来判断是否执行页面回滚操作。

// 解决 H5 IOS input 聚焦时，页面整个被推上去了，键盘收起页面未下移 BUG
(function () {
	(/iphone|ipod|ipad/i.test(navigator.userAgent)) && 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);
})();