uni-app input输入框在弹出键盘之后偶尔会将页面抬高到两倍键盘的高度

uni-app input输入框在弹出键盘之后偶尔会将页面抬高到两倍键盘的高度

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 26100.4652
HBuilderX 正式
HBuilderX版本 4.85
手机系统 Android
手机版本 Android 16
手机厂商 小米
手机机型 REDMI K80 pro
页面类型 vue
vue版本 vue3
打包方式 离线
项目创建方式 HBuilderX

示例代码：

<input
class="sm-size"
v-model="form.buyerName"
placeholder="请输入发票抬头" />

操作步骤：

首先将input放在需要被键盘顶起的位置，比如屏幕下方，不断重复：获取焦点、收起键盘，偶尔会触发

预期结果：

页面被顶起的位置完全受cursor-spacing或者adjust-position控制，不应将页面过度抬高。

实际结果：

页面被顶的太高，大概为键盘两倍的高度

bug描述：

使用input文本框的时候，获取焦点并弹出键盘时偶尔会出现页面被顶的特别高的情况，尤其是在不设置cursor-spacing的时候触发很频繁。起初我以为是adjust-position的问题，在尝试过之后，发现adjust-position是有效的，但也仅限于BUG未触发时，只要触发了该BUG，adjust-position属性将无效，页面依旧会被顶起。

图片 图片


更多关于uni-app input输入框在弹出键盘之后偶尔会将页面抬高到两倍键盘的高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

社区不活跃了呀，有人吗

更多关于uni-app input输入框在弹出键盘之后偶尔会将页面抬高到两倍键盘的高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这都能有BUG？

社区不活跃了呀，有人吗

bug里套娃是吗

hello ， 能够提供一下最简的可以复现的项目吗？

该bug反馈内容较为完整，描述了问题现象、复现条件和已尝试的解决方案。问题很可能成立，特别是在Android平台特定机型上。反馈中包含了必要的分类信息（HBuilderX 4.85、Android 16、小米K80 pro等），代码示例简洁可复现，复现步骤基本清晰但可补充具体操作频率。预期结果合理，实际表现确实异常。
根据知识库，App平台软键盘有adjustResize和adjustPan两种模式（文档说明）。用户设置adjust-position="false"但问题仍出现，可能因为：

HBuilderX 4.85版本较旧（当前最新版更高），可能存在已知键盘适配问题
Android平台在softinputMode为adjustResize时，adjust-position属性会失效（属性说明）
个别安卓机型在adjustResize模式下会出现页面异常抬高现象（知识库明确提示"可能会在个别安卓机型闪现灰屏或漏出下层页面内容"）

建议用户：

升级HBuilderX至最新正式版（当前4.85非最新）
尝试在manifest.json中设置"softinputMode": “adjustPan”
监听@keyboardheightchange事件（需App 3.1.0+）动态调整页面（事件文档）
若仍无法解决，需提供更详细的复现路径和视频记录 内容为 AI 生成，仅供参考

这是一个已知的 Android 平台在特定场景下的兼容性问题，主要与系统 WebView 的键盘处理机制有关。问题核心在于键盘弹出时，WebView 的 visualViewport 与布局视口计算偶尔出现异常。

直接解决方案：

  1. 强制设置 cursor-spacing：这是最有效且推荐的首选方案。即使你不需要间距，也请设置一个固定值（例如 cursor-spacing="20"）。这能为系统提供一个明确的定位参考，可以极大降低该异常触发的概率。

    <input
  class="sm-size"
  v-model="form.buyerName"
  cursor-spacing="20"
  placeholder="请输入发票抬头" />

  2. 检查并确保页面滚动模式正确：在 pages.json 中，确认当前页面的配置未设置 "disableScroll": true。同时，避免在页面容器上使用 overflow: hidden 等可能影响原生滚动计算的 CSS。

  3. 使用 @focus 与 @blur 进行高度补偿（备选）：如果上述方法仍不能完全解决，可以监听输入框的聚焦和失焦事件，手动调整页面布局。

    // 在模板中
<input
  @focus="onInputFocus"
  @blur="onInputBlur"
  ... />

// 在脚本中
const onInputFocus = (e) => {
  // 可以尝试在聚焦时，轻微滚动页面或调整一个固定容器的底部内边距
  // 例如：设置一个与键盘高度相近的 padding-bottom
  // 需要根据实际情况测试具体值
};
const onInputBlur = (e) => {
  // 失焦时恢复
};
回到顶部