uni-app VUE3运行到鸿蒙APP textarea 无法正常弹起来

uni-app VUE3运行到鸿蒙APP textarea 无法正常弹起来

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

示例代码：

<textarea :auto-focus="true" :show-confirm-bar='true' class='padding-bottom-xs' style="position: relative;bottom: 0;height: 140rpx;" adjust-position="false" hold-keyboard="true" cursor-spacing="0" maxlength="100" align="left" v-model="todoThing" /> ```

操作步骤：

<textarea :auto-focus="true" :show-confirm-bar='true' class='padding-bottom-xs' style="position: relative;bottom: 0;height: 140rpx;" adjust-position="false" hold-keyboard="true" cursor-spacing="0" maxlength="100" align="left" v-model="todoThing" /> bug1：设置:show-confirm-bar='true' :auto-focus="true" 弹起输入框，一闪而过然后又收回去了，只留下输入键盘。 <textarea :auto-focus="true" :show-confirm-bar='true' class='padding-bottom-xs' style="position: relative;bottom: 0;height: 140rpx;" adjust-position="false" hold-keyboard="true" cursor-spacing="0" maxlength="100" align="left" v-model="todoThing" /> bug2：设置::auto-focus="true" :show-confirm-bar='false' 输入框弹起来但是和下边有很大的边距 。 ```

预期结果：

正常弹出


### 实际结果：


存在各种异常

bug描述：

<textarea :auto-focus="true" :show-confirm-bar='true' class='padding-bottom-xs' style="position: relative;bottom: 0;height: 140rpx;" adjust-position="false" hold-keyboard="true" cursor-spacing="0" maxlength="100" align="left" v-model="todoThing" /> bug1：设置:show-confirm-bar='true' :auto-focus="true" 弹起输入框，一闪而过然后又收回去了，只留下输入键盘。 <textarea :auto-focus="true" :show-confirm-bar='true' class='padding-bottom-xs' style="position: relative;bottom: 0;height: 140rpx;" adjust-position="false" hold-keyboard="true" cursor-spacing="0" maxlength="100" align="left" v-model="todoThing" /> bug2：设置::auto-focus="true" :show-confirm-bar='false' 输入框弹起来但是和下边有很大的边距 。 运行到鸿蒙总出现这个问题，运行到安卓 ios 小程序不存在问题。

更多关于uni-app VUE3运行到鸿蒙APP textarea 无法正常弹起来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

该bug反馈内容基本完整，描述了鸿蒙平台特有的textarea异常现象，包含标题、详细描述、代码示例、复现步骤、预期与实际结果及分类信息。但存在不足：代码示例缺少完整页面上下文和CSS类定义，无法直接运行；未明确uni-app核心版本号（仅提供HBuilderX 4.87）；复现步骤可更细化操作流程。
经知识库核查，该bug成立。知识库显示鸿蒙平台存在多个textarea相关修复记录：“修复组件textarea adjust-position某些情况表现异常问题”、“修复组件textarea某些情况高度不符合预期”。关键问题在于：

hold-keyboard=“true"属性在知识库明确标注"仅支持微信小程序”，鸿蒙平台不支持此属性
adjust-position="false"与鸿蒙键盘处理机制冲突，知识库指出该属性在部分平台有特殊行为
show-confirm-bar在鸿蒙平台实现可能与安卓/iOS存在差异

建议用户：

移除hold-keyboard属性（鸿蒙不支持）
尝试将adjust-position设为true或删除该属性
升级至最新HBuilderX版本（知识库显示4.87之后有鸿蒙textarea专项修复）
参考textarea文档确认平台兼容性

此问题属于鸿蒙平台特有适配问题，非误报，但需调整代码适配鸿蒙规范。 内容为 AI 生成，仅供参考

更多关于uni-app VUE3运行到鸿蒙APP textarea 无法正常弹起来的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


补充一个截图说明问题。我是用下面代码表现正常，vue3+鸿蒙真机，你需要进一步提供接哦。
<template>
<view>
<view>–{{todoThing}}–</view>
<textarea :auto-focus="true" :show-confirm-bar='false' class='padding-bottom-xs' style="position: relative;bottom: 0;height: 140rpx;border: 1px solid red;" adjust-position="false" hold-keyboard="true" cursor-spacing="0" maxlength="100" align="left" v-model="todoThing" />

</view>
</template> <script setup> import { ref } from 'vue' const todoThing = ref('') </script>

根据你的描述，这个问题是uni-app在鸿蒙平台上运行Vue3项目时，textarea组件在特定配置下出现的兼容性问题。

问题分析：

  1. bug1（输入框一闪而过）：当同时设置auto-focus="true"和show-confirm-bar='true'时，鸿蒙平台可能对这两个属性的同时作用处理存在缺陷。输入框弹出后，确认栏的渲染或布局计算可能触发了重新渲染，导致输入框异常收起。

  2. bug2（底部边距过大）：当show-confirm-bar='false'时，鸿蒙平台可能对无确认栏的textarea定位计算有误，保留了为确认栏预留的空间，导致异常边距。

解决方案：

  1. 临时规避方案：

    • 移除auto-focus属性，改为手动触发聚焦。通过ref获取组件实例，在mounted或合适的时机调用focus()方法。
    • 调整样式，尝试移除position: relative; bottom: 0;，使用更简单的布局方式。
    • 考虑使用@focus事件监听聚焦状态，配合v-if或v-show控制相关元素的显示，避免布局抖动。

  2. 检查平台差异：

    • 使用条件编译，针对鸿蒙平台调整属性或样式：
      <textarea
  :auto-focus="!isHarmonyOS"
  :show-confirm-bar="isHarmonyOS ? false : true"
  <!-- 其他属性 -->
/>
回到顶部