vue 移动端网页被iOS 键盘顶上去不回弹

原创

mob64ca12f66e6c 2023-08-23 03:47:51 ©著作权

文章标签 输入框回弹 2d 文章分类 iOS 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f66e6c的原创作品，请联系作者获取转载授权，否则将追究法律责任

解决vue移动端网页被iOS键盘顶起不回弹的问题

问题描述

在移动端开发中，使用vue框架开发的网页在iOS设备上存在一个常见的问题：当输入框获取焦点并弹出键盘后，页面会被键盘顶起，但键盘收起后页面却不会回弹回原来的位置。这给用户体验带来了困扰，我们需要解决这个问题。

解决流程

下面是解决这个问题的整体流程，我们将使用vue的相关功能和一些JavaScript代码来实现。

gantt
    title 解决vue移动端网页被iOS键盘顶上去不回弹
    dateFormat  YYYY-MM-DD
    section 准备工作
    计划任务         :a1, 2022-01-01, 3d
    section 开发步骤
    监听键盘事件       :a2, after a1, 2d
    获取输入框位置信息  :a3, after a2, 2d
    计算输入框所在位置  :a4, after a3, 2d
    设置页面滚动行为   :a5, after a4, 2d
    section 测试与优化
    测试功能          :a6, after a5, 2d
    优化代码          :a7, after a6, 2d
    section 发布
    发布新版本        :a8, after a7, 2d

开发步骤

监听键盘事件

我们首先需要监听键盘事件，以便在键盘弹出或收起时触发相应的处理。在vue中，可以使用Vue的生命周期钩子函数mounted来监听键盘事件。

mounted() {
  window.addEventListener('resize', this.handleResize);
}

获取输入框位置信息

我们需要获取输入框在页面中的位置信息，包括它的上边界、下边界等信息。可以通过Vue的$ref属性获取输入框的DOM元素，并调用其getBoundingClientRect()方法来获取位置信息。

methods: {
  handleResize() {
    const inputElement = this.$refs.input; // 获取输入框DOM元素
    const inputRect = inputElement.getBoundingClientRect(); // 获取输入框位置信息
    this.inputTop = inputRect.top; // 输入框上边界
    this.inputBottom = inputRect.bottom; // 输入框下边界
  },
},

计算输入框所在位置

我们需要计算输入框当前所在的位置，用于判断页面是否需要回弹。可以通过window.innerHeight获取可视区域的高度，再结合输入框的位置信息进行计算。

methods: {
  handleResize() {
    // ...省略上文代码...

    const windowHeight = window.innerHeight; // 可视区域高度
    this.isInputInViewport = this.inputBottom > windowHeight; // 输入框是否在可视区域之外
  },
},

设置页面滚动行为

根据输入框所在的位置，我们可以判断页面是否需要回弹。当输入框在可视区域之外时，我们需要将页面滚动到输入框的位置，让用户可以看到输入框。

methods: {
  handleResize() {
    // ...省略上文代码...

    if (!this.isInputInViewport) {
      const scrollOffset = this.inputBottom - windowHeight + this.extraOffset; // 计算滚动偏移量
      window.scrollTo(0, scrollOffset); // 滚动到输入框位置
    }
  },
},