h5 ios端input获取焦点弹出键盘后页面可滚动的问题

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

问题描述

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

当前页面的布局如下:

js 复制代码
.add-page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

解决方案

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

js 复制代码
// 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. 由于页面内容只占大概1/3的屏幕高度,所以首先考虑了将当前页面使用fixed定位,不给高度。期望表现出和安卓类似的结果:软键盘出来将页面顶上去,不可滑动。发现没什么效果,和一开始的表现一致。 代码如下:
js 复制代码
.add-page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
  1. 在软键盘弹出时,在vconsole输出window.innerHeight,发现和软键盘收起时的不一样。想着通过监听resize事件,动态设置页面高度。尝试发现,在软键盘弹起时,ios并不会触发resize事件

  2. 在input获取焦点时,尝试禁用页面滚动,尝试无效。参考该篇文章:blog.51cto.com/u_16175474/...

相关推荐
妮妮喔妮3 分钟前
【无标题】
开发语言·前端·javascript
谦行14 分钟前
深度神经网络训练过程与常见概念
前端
Simon_He44 分钟前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊1 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军2 小时前
React 协调器 render 阶段
前端·react.js·前端框架
与火星的孩子对话2 小时前
Unity进阶课程【六】Android、ios、Pad 终端设备打包局域网IP调试、USB调试、性能检测、控制台打印日志等、C#
android·unity·ios·c#·ip
中微子2 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游2 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能