uni-app input之间点击切换的时候页面不会自动往上推

uni-app input之间点击切换的时候页面不会自动往上推

开发环境 版本号 项目创建方式
Windows win11 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win11

HBuilderX类型：正式

HBuilderX版本号：4.87

手机系统：HarmonyOS NEXT

手机系统版本号：HarmonyOS 5.0.1

手机厂商：华为

手机机型：nova14

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：
<template> <view class="content"> <view style="height: 80vh;background-color: red;" > 占位内容 </view> <input placeholder="输入框1" cursor-spacing="30"/> <input placeholder="输入框2" cursor-spacing="30"/> <input placeholder="输入框3" cursor-spacing="30"/> </view> </template> <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { } } </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } </style> 
操作步骤：
1. 点击第一个input框
2. 点击第二个input框

预期结果：
页面往上推，input始终在可视区域内，没有被键盘遮挡

实际结果：
页面缩了回去，键盘遮挡了input框

bug描述：
页面有多个input框，点击第一个input框页面会网上推，但是切换input的时候，页面又缩了回去，没有网上推
只有鸿蒙有这个问题

更多关于uni-app input之间点击切换的时候页面不会自动往上推的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

新建 libs/UniAppRuntime.har 替换一下，修复了此问题，表现和安卓一致，切换焦点不会丢失上推效果

更多关于uni-app input之间点击切换的时候页面不会自动往上推的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已测试，已解决。感谢。

1.已经是最新HBuilderX版本 2.显式设置adjust-position="true"并添加cursor-spacing，没有效果

@DCloud_UNI_OttoJi 麻烦帮我看看

你可在 onBlur 里手动调用隐藏键盘来规避这个问题
onBlur(){
uni.hideKeyboard()

}

ios也有同样的情况，不过切换之后，弹出键盘，页面会滚动异常

非鸿蒙问题请独立开新贴沟通，并提供复现工程

该bug反馈内容完整，描述清晰：问题聚焦于HarmonyOS NEXT平台下input切换时页面未自动上推，提供了详细环境信息（HBuilderX 4.87、Vue3、HarmonyOS 5.0.1）、可直接运行的代码示例及明确复现步骤。预期结果合理，符合移动端输入体验规范。
经核查知识库，发现关键依据：adjust-position属性文档中明确标注支持平台为"App-Android、微信小程序等"，未包含HarmonyOS NEXT（链接）。另据平台差异说明，HarmonyOS Next对部分API支持有限（如光标位置获取标注"x"）。这证实是鸿蒙平台特有问题，非误报。
当前HBuilderX 4.87版本对鸿蒙Next支持可能存在缺陷，建议：

升级至最新HBuilderX版本（鸿蒙平台适配持续更新）
尝试显式设置adjust-position="true"并添加cursor-spacing
若仍无效，需通过鸿蒙平台键盘处理文档排查原生配置

此问题属于平台兼容性范畴，非基础概念错误，需官方加强鸿蒙Next的键盘适配测试。 内容为 AI 生成，仅供参考

这是一个在HarmonyOS NEXT上已知的uni-app兼容性问题。问题的核心在于系统键盘事件处理机制与uni-app的页面滚动逻辑存在冲突。

问题分析： 在HarmonyOS NEXT系统中，当键盘弹出时，uni-app会自动调整页面布局以避免输入框被遮挡。但在多个输入框之间切换焦点时，系统可能错误地判断键盘状态未变化，导致页面回滚到原始位置。

解决方案：

  1. 使用cursor-spacing属性（已使用）： 您已经正确设置了该属性，这有助于为输入框预留键盘空间。

  2. 手动控制滚动（推荐）： 监听输入框的聚焦事件，强制页面滚动到合适位置。

    <template>
  <input 
    placeholder="输入框1" 
    cursor-spacing="30"
    @focus="handleFocus"
  />
</template>

<script>
export default {
  methods: {
    handleFocus(e) {
      // 获取当前输入框位置并滚动
      uni.createSelectorQuery()
        .select(`#input-${e.currentTarget.id}`)
        .boundingClientRect(rect => {
          uni.pageScrollTo({
            scrollTop: rect.top,
            duration: 300
          })
        }).exec()
    }
  }
}
</script>

  3. 使用page-meta组件： 在页面顶部添加page-meta配置，启用更稳定的键盘适配。

    <template>
  <page-meta :page-style="`padding-bottom: ${keyboardHeight}px`">
    <!-- 页面内容 -->
  </page-meta>
</template>
回到顶部