美文网首页
解决 H5 IOS input 聚焦时,页面整个被推上去了,键盘

解决 H5 IOS input 聚焦时,页面整个被推上去了,键盘

作者: 土986885 | 来源:发表于2020-08-17 09:53 被阅读0次

    =================转载===================================:
    网上方法大多就只有 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
    )

    相关文章

      网友评论

          本文标题:解决 H5 IOS input 聚焦时,页面整个被推上去了,键盘

          本文链接:https://www.haomeiwen.com/subject/udvfjktx.html