移动端使用better-scroll引发的键盘弹出时，输入框被键盘遮挡事件

最新推荐文章于 2022-01-20 10:03:14 发布

一只努力的前端菜鸟

最新推荐文章于 2022-01-20 10:03:14 发布

阅读量483

点赞数

分类专栏： vue javascript

本文链接：https://blog.csdn.net/YJJ19/article/details/113413348

版权

javascript 同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

本文探讨了软键盘弹出导致viewport高度变化，隐藏界面的问题，并提供了解决方案。通过为input元素添加focus监听，利用better-scroll的scrollToElement方法确保内容跟随输入焦点实时滚动，避免了键盘遮挡问题。

摘要由CSDN通过智能技术生成

分析原因：

软键盘调起引起viewport高度变化，进而影响到了滚动区域容器的高度。容器高度变了，而容器content的scrollTop没变化，表现为原再视图底部的界面被隐藏了，看起来就像是软键盘把它挡住了。

解决方法：

给滚动区域的每一个input标签添加focus监听事件，用以记录当前所操作的input元素。当viewport变化时，window.onresize触发，这时使用better-scroll的scrollToElement方法，使内容滚动到当前操作的input的位置，最好是延时100ms以上开始滚动。

this.scroll.on("refresh", () => { //better-scroll刷新时，input标签可能会有变化，所以重新给input添加focus监听事件
  const inputs = this.$refs["content"].querySelectorAll("input");
  
  inputs.forEach(el => {
    el.removeEventListener("focus", this.fn)
    el.addEventListener("focus", this.fn)
  });

})
window.onresize = () => {    
  setTimeout(() => {
    this.scroll.scrollToElement(this.input, 300, 0, -20)
  }, 200)
}