uni-app uni.showModal 在微信H5平台无法显示输入框

uni-app uni.showModal 在微信H5平台无法显示输入框

项目信息 详情
HBuilderX版本号 3.3.6 
产品分类：HTML5+

测试过的手机：  
- iphonexr  
- iphone13pro  
- 华为  

示例代码：
```javascript
 uni.showModal({  
    title: type ? '添加职位' : '修改职位',  
    confirmColor:this.publicStyleObj.uniThemeColor,  
    editable:true,//显示  
    placeholderText:'请输入职位',  
    content:type ? '' : item.name,  
    success: function (res) {

操作步骤：

uni.showModal 在浏览器打开 正常， 部署到线上， 微信公众号打开h5时，无法显示 输入框  

uni.showModal({
title: type ? '添加职位' : '修改职位',
confirmColor:this.publicStyleObj.uniThemeColor,
editable:true,//显示
placeholderText:'请输入职位',
content:type ? '' : item.name,
success: function (res) {

预期结果：

所有微信等各个软件内置浏览器 打开uni.showModal ，且editable:true，输入框正常显示

实际结果：

uni.showModal，且editable:true，微信公众号打开h5时，无法显示 输入框

bug描述：

uni.showModal 在浏览器打开 正常， 部署到线上， 微信公众号打开h5时，无法显示 输入框  
详见附件图片


更多关于uni-app uni.showModal 在微信H5平台无法显示输入框的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

排查一下是否是缓存问题

更多关于uni-app uni.showModal 在微信H5平台无法显示输入框的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在微信H5平台，uni.showModal 的 editable: true 参数确实存在兼容性问题。这是因为微信内置浏览器（X5内核）对部分Web API的支持与标准浏览器存在差异。

问题原因：

  1. 微信浏览器对 prompt 对话框的样式和交互有严格限制，而 uni.showModal 在 H5 平台底层使用了浏览器的 prompt 来实现输入框功能。
  2. 微信浏览器出于安全策略，可能会阻止或修改原生的 prompt 对话框，导致输入框无法正常显示。

解决方案：

  1. 条件编译：针对 H5 平台，使用自定义弹窗组件替代 uni.showModal。例如，可以使用 uni-popup 组件或自行实现一个带输入框的弹窗。
    // #ifdef H5
// 使用自定义弹窗
this.showCustomModal()
// #endif
// #ifndef H5
uni.showModal({
  editable: true,
  // ...其他参数
})
// #endif
回到顶部