移动端IOS的H5页面被键盘顶起后，底部有一大片空白区域的解决方法

在移动端开发中，当使用HTML5 (特别是在Vue.js框架下)构建应用时，经常会遇到键盘弹出导致页面内容被顶起的问题。当键盘收起后，页面未能自动恢复到原来的位置。

当键盘弹出时，你可以通过JavaScript监听键盘的显示和隐藏事件，并相应地调整页面的滚动位置。

export default {
  mounted() {
    window.addEventListener('focusin', this.handleFocusIn);
    window.addEventListener('focusout', this.handleFocusOut);
  },

  unmounted() {
    window.removeEventListener('focusin', this.handleFocusIn);
    window.removeEventListener('focusout', this.handleFocusOut);
  },

  methods: {
    handleFocusIn() {
      const scrollHeight = document.documentElement.scrollHeight;
      setTimeout(() => {
        window.scrollTo(0, scrollHeight);
      }, 100); // 延迟确保键盘事件已处理完成
    },

    handleFocusOut() {
      setTimeout(() => {
        window.scrollTo(0, 0); // 恢复到原始位置
      }, 100); // 延迟确保键盘事件已处理完成
    }
  }
}