ios系统的微信浏览器完成输入后元素脱流（页面不回弹）

最新推荐文章于 2024-04-05 16:10:37 发布

让我玩项羽

最新推荐文章于 2024-04-05 16:10:37 发布

阅读量1.3k

点赞数 1

分类专栏： Vue 文章标签： vue ios

本文链接：https://blog.csdn.net/weixin_42136785/article/details/87882213

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

问题描述：input框在页面中下位置时：点击输入框时ios系统输入法将浏览器整个推上去，完成输入后浏览器还处在被输入法推上去的状态，需要用户手动下拉将网页还原成正常状态。

解决方法：选择所有的input框，对其添加 focus 和 blur 事件监听， focus 事件触发后给该单页面添加 "paddingBottom"，blur 事件触发时重置样式，可以自动让浏览器重置为正常状态。

let that = this;
// 解决ios输入框将网页顶起导致其他元素脱离dom流问题
document.querySelectorAll("input").forEach(element => {
    element.addEventListener("focus", function() {
    that.$refs.pagebox.style.paddingBottom = "1px";
  })
  element.addEventListener("blur", function() {
    that.$refs.pagebox.style.paddingBottom = "0";
  })
})