h5 ios端input获取焦点弹出键盘后页面可滚动的问题ios端，当input获取焦点，弹出软键盘后，发现当前页面在软

ios端input获取焦点后，弹出软键盘，底部页面在软键盘和顶部之间的区域可以触摸滚动的问题的尝试解决。目前尝试了几种方案，解决的并不是很完美，欢迎有相关经验的大佬评论指点。

问题描述

ios端，当input获取焦点，弹出软键盘后，发现当前页面在软键盘到顶部的区域可以滚动起来。如图所示：

当前页面的布局如下：

.add-page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

解决方案

查看小程序发现，在input聚焦出现软键盘时，触摸/点击页面上其它位置，软键盘会收起，当前input失焦。 参考小程序的方案，做了如下实现：触摸其它元素时，手动让当前的input失焦。代码如下：

// app.vue
function manualBlur(event: Event): void {
  const activeElement = document.activeElement as HTMLElement | null
  // 空值检查确保后续操作安全
  if (!activeElement) return

  // 类型收窄至具体表单元素
  const isFormElement = activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA'
  if (!isFormElement) return

  // 明确事件目标类型
  const target = event.target as Node | null
  // 确保目标存在且不是当前焦点元素
  if (target && !activeElement.contains(target)) {
    activeElement.blur()
  }
}

onMounted(() => {
  document.addEventListener('touchstart', manualBlur)
})

onUnmounted(() => {
  document.removeEventListener('touchstart', manualBlur)
})

当前方案是目前尝试的最为有效的方案，有一个小漏洞：保持当前input不失焦，还是可以滚动页面。

尝试未果的方案

由于页面内容只占大概1/3的屏幕高度，所以首先考虑了将当前页面使用fixed定位，不给高度。期望表现出和安卓类似的结果：软键盘出来将页面顶上去，不可滑动。发现没什么效果，和一开始的表现一致。代码如下：

.add-page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

在软键盘弹出时，在vconsole输出window.innerHeight,发现和软键盘收起时的不一样。想着通过监听resize事件，动态设置页面高度。尝试发现，在软键盘弹起时，ios并不会触发resize事件。
在input获取焦点时，尝试禁用页面滚动，尝试无效。参考该篇文章：blog.51cto.com/u_16175474/…