uni-app H5键盘弹起时有时会遮挡到input框，此BUG比较随机

uni-app H5键盘弹起时有时会遮挡到input框，此BUG比较随机

操作步骤：

  • 1

预期结果：

  • 1

实际结果：

  • 1

bug描述：

https://v.youku.com/v_show/id_XNTE4MTk4MTc5Mg==.html

信息类别 详情
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本号 Windows 10 专业版 20H2
HBuilderX类型 正式
HBuilderX版本号 3.1.18
浏览器平台 微信内置浏览器
浏览器版本 8.0.3
项目创建方式 HBuilderX

更多关于uni-app H5键盘弹起时有时会遮挡到input框，此BUG比较随机的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

https://v.youku.com/v_show/id_XNTE4MTk4MTc5Mg==.html 这是bug的视频

更多关于uni-app H5键盘弹起时有时会遮挡到input框，此BUG比较随机的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在H5端常见的兼容性问题，特别是在移动端浏览器中。键盘弹起遮挡输入框的主要原因是键盘弹起时窗口可视区域（viewport）高度变化，但页面布局未能及时适配。

解决方案：

  1. 监听窗口尺寸变化
onLoad() {
  window.addEventListener('resize', () => {
    const activeElement = document.activeElement
    if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
      activeElement.scrollIntoView({behavior: 'smooth', block: 'center'})
    }
  })
}
  1. 使用CSS适配
/* 确保页面可滚动 */
page {
  height: 100vh;
  overflow-y: auto;
}

/* 输入框获得焦点时调整位置 */
input:focus, textarea:focus {
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
  1. uni-app特定方案
// 在页面中使用uni.pageScrollTo
onFocus() {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
  })
}
回到顶部