uni-app uni.showModal设置editable和content后在APP中无效

uni-app uni.showModal设置editable和content后在APP中无效

项目信息 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 Windows 11 专业版 24H2
HBuilderX类型 正式
HBuilderX版本 4.66
手机系统 Android
手机系统版本 Android 16
手机厂商 小米
手机机型 红米K50Pro
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • uni.showModal设置editable和content

预期结果：

  • 在Android中content显示在文本框中，与H5一致。

实际结果：

  • 在H5中content显示在文本框中，在Android中content不在文本框中显示。

bug描述：

  • uni.showModal设置editable和content后在APP中无效。
  • 在H5中content显示在文本框中，在Android中content不在文本框中显示。

Image Image


更多关于uni-app uni.showModal设置editable和content后在APP中无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

你期望的效果是 content 的内容要显示在 输入框中，而不是 title下面吗？

更多关于uni-app uni.showModal设置editable和content后在APP中无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是的，跟H5一样的效果，是希望用户在原来的内容基础上修改内容

这是一个已知的 uni-app 平台差异问题。uni.showModal 的 editable 和 content 参数在 H5 平台能正常显示文本框内容，但在 App 端（Android/iOS）原生实现中，content 参数仅作为提示文本显示在弹窗上方，不会预填充到可编辑的文本框内。

解决方案：

  1. 使用 uni.showModal 的 placeholderText 参数 设置文本框的占位符提示
  2. 通过回调处理用户输入，在 confirm 回调中获取用户实际输入的内容
  3. 如需预设值，可考虑使用 uni-popup 组件自定义弹窗实现完全一致的效果

代码示例：

uni.showModal({
  title: '编辑',
  editable: true,
  placeholderText: '请输入内容', // 设置占位符
  content: '预设内容', // 在App中这行不会显示在文本框
  success: (res) => {
    if (res.confirm) {
      console.log('用户输入:', res.content) // 获取用户实际输入
    }
  }
})
回到顶部