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/...

相关推荐
老虎06277 分钟前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿1213821 分钟前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴39 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack1 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669131 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx1 小时前
前端-CSS-day1
前端·css
知否技术1 小时前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
幼儿园技术家1 小时前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好2 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝2 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css