Vue h5项目解决键盘遮挡输入框问题

  • 注重用户体验,积累开发经验

在开发H5应用时,很可能会遇到:在用户输入时,弹出的小键盘遮挡输入框,导致当前正在输入的内容无法看见,那如何解决呢?

使用一个不太常用的方法: Element.scrollIntoView() 点击查看MDN文档说明
scrollIntoView() 方法会滚动元素的父容器,使被调用 scrollIntoView() 的元素对用户可见。

本方法亲测可用

mounted(){
  this.scrollIntoView()
},
methods: {
  //输入施工费用时,调整页面scroll高度
    scrollIntoView() {
      window.addEventListener("resize", () => {
        document.activeElement.scrollIntoView(true);
      });
    },
},
 unmounted() {
    window.removeEventListener("resize");
  }

你可能感兴趣的:(Vue h5项目解决键盘遮挡输入框问题)