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

最新推荐文章于 2024-07-31 15:52:02 发布

粤小七

最新推荐文章于 2024-07-31 15:52:02 发布

阅读量9.9k

点赞数 5

分类专栏： Web前端文章标签： Web 前端 Vue H5 IOS 兼容性

本文链接：https://blog.csdn.net/qq1014156094/article/details/88698647

版权

Web前端专栏收录该内容

30 篇文章 1 订阅

订阅专栏

网上方法大多就只有 window.scrollTo(0, 0) ，会造成 input 失去焦点时就滚动到顶部了，这是不对的，并不是所有情况都要回顶部，于是自己写了个适用全部场景的解决方案，并且添加后，所有页面生效~

在全局的入口页面（例：App.vue）加以下代码：

(/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
)