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

网上方法大多就只有 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
)
  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
感谢您的提问!以下是 Taro Ui Vue3 中防止 H5 安卓机在输入框弹窗键盘页面顶上去的一个例子: ``` <template> <div> <AtButton type="primary" @click="toggleModal">弹出模态框</AtButton> <AtModal :isOpened="isOpened" @close="handleClose"> <AtModalHeader>标题</AtModalHeader> <AtModalContent> <div class="input-wrapper"> <input type="text" placeholder="请输入内容" @focus="handleFocus" @blur="handleBlur"> </div> </AtModalContent> <AtModalAction> <Button onClick="handleClose">取消</Button> <Button onClick="handleClose">确定</Button> </AtModalAction> </AtModal> </div> </template> <script> import { defineComponent, onMounted, ref } from 'vue' import { AtButton, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui-vue3' export default defineComponent({ name: 'ModalExample', components: { AtButton, AtModal, AtModalHeader, AtModalContent, AtModalAction, }, setup() { const isOpened = ref(false) const toggleModal = () => { isOpened.value = !isOpened.value } const handleClose = () => { isOpened.value = false } const handleFocus = () => { if (/Android/gi.test(navigator.userAgent)) { setTimeout(() => { document.activeElement.scrollIntoViewIfNeeded() }, 100) } } const handleBlur = () => { if (/Android/gi.test(navigator.userAgent)) { setTimeout(() => { document.activeElement.scrollIntoViewIfNeeded() }, 100) } } onMounted(() => { if (/Android/gi.test(navigator.userAgent)) { const height = window.innerHeight const timer = setInterval(() => { if (window.innerHeight !== height) { document.body.style.height = window.innerHeight + 'px' height = window.innerHeight } }, 100) return () => clearInterval(timer) } }) return { isOpened, toggleModal, handleClose, handleFocus, handleBlur, } }, }) </script> <style scoped> .input-wrapper { padding: 20px; } input { width: 100%; height: 50px; font-size: 18px; border: none; border-bottom: 1px solid #ccc; outline: none; } </style> ``` 这个例子中,我们使用了 Taro Ui Vue3 的 AtModal 组件,同在输入框的 focus 和 blur 事件中,通过调用 `scrollIntoViewIfNeeded()` 方法,将输入框滚动到可视区域内。同,在组件挂载,我们通过监听窗口大小的变化,动态设置 body 的高度,以防止页面出现滚动条。希望这个例子能够帮到您!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值