uni-app uni.showModal配置editable:true在鸿蒙上不显示输入框

uni-app uni.showModal配置editable:true在鸿蒙上不显示输入框

示例代码：

uni.showModal({  
  title: '兑换会员',  
  editable: true,  
  placeholderText: '请输入会员兑换码',  
  confirmText: '立即兑换',  
  success: async (res) => {}
});

操作步骤：

  • 鸿蒙系统中，弹窗没有显示输入框

预期结果：

  • 鸿蒙系统中，弹窗显示输入框

实际结果：

  • 鸿蒙系统中，弹窗没有显示输入框

bug描述：

  • 问题如题 模拟器是5.1.1 API版本是19

Image

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.76
手机系统 HarmonyOS NEXT
手机系统版本号 HarmonyOS 5.0.5
手机厂商 模拟器
手机机型 emulator
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app uni.showModal配置editable:true在鸿蒙上不显示输入框的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

鸿蒙中使用了原生弹窗，目前原生弹窗没有提供输入的方式

更多关于uni-app uni.showModal配置editable:true在鸿蒙上不显示输入框的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


文档写的参数editable平台差异支持App (3.2.10+)，意思是App包含鸿蒙，App (3.2.10+)不包含鸿蒙是吗

回复 Sinea: 是的这个不包含鸿蒙

这是一个已知的鸿蒙系统兼容性问题。在HarmonyOS NEXT上，uni.showModal的editable参数目前无法正常显示输入框。

这是由于鸿蒙系统底层对Web组件弹窗的实现方式与Android/iOS存在差异，导致输入框无法正确渲染。

临时解决方案：

  1. 使用uni-app原生输入组件替代
// 自定义弹窗+input组件
const inputValue = ref('')
function showCustomModal() {
  // 使用popup或自定义组件实现
}
  1. 条件编译处理
// #ifdef HARMONYOS
// 使用鸿蒙专用API或自定义实现
// #else
uni.showModal({
  title: '兑换会员',
  editable: true,
  placeholderText: '请输入会员兑换码',
  confirmText: '立即兑换'
})
// #endif
  1. 降级方案
// 先弹窗提示，再调用输入框
uni.showModal({
  title: '提示',
  content: '即将打开输入框',
  success: () => {
    uni.showActionSheet({
      itemList: ['输入兑换码'],
      success: () => {
        // 调用原生输入框
      }
    })
  }
})
回到顶部