uni-app支付宝小程序uni.showModal设置editable:true时弹出来的框不能输入

uni-app支付宝小程序uni.showModal设置editable:true时弹出来的框不能输入

产品分类

  • uniapp/小程序/阿里

PC开发环境

  • 操作系统：Windows
  • 操作系统版本号：window10

开发工具

  • HBuilderX类型：正式
  • HBuilderX版本号：3.99
  • 第三方开发者工具版本号：3.8.3
  • 基础库版本号：xxx

项目创建方式

  • HBuilderX

示例代码

uni.showModal({
title: '确定完成',
editable: true,
content: '',
placeholderText: '交易密码'
});

操作步骤

  • 弹出的对话框没有输入框

预期结果

  • 弹出的对话框有输入框

实际结果

  • 弹出的对话框没有输入框

bug描述

  • 弹出的对话框没有输入框

更多关于uni-app支付宝小程序uni.showModal设置editable:true时弹出来的框不能输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这个兼容性问题，H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）适用，可以自定义弹框组件

更多关于uni-app支付宝小程序uni.showModal设置editable:true时弹出来的框不能输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 UniApp 中，uni.showModal 的 editable 属性用于控制模态对话框是否可编辑，允许用户输入文本。然而，支付宝小程序对 uni.showModal 的支持可能有限，导致 editable: true 在某些情况下无法正常工作。

如果你在使用支付宝小程序时遇到 uni.showModal 的 editable: true 无法输入的问题，可以尝试以下解决方案：

解决方案 1: 使用支付宝小程序的原生 API

支付宝小程序原生提供了 my.prompt API，可以实现带输入框的模态对话框。你可以直接使用这个 API 来代替 uni.showModal。

my.prompt({
  title: '提示',
  message: '请输入内容',
  placeholder: '请输入...',
  okButtonText: '确定',
  cancelButtonText: '取消',
  success: (result) => {
    if (result.ok) {
      console.log('用户输入的内容:', result.inputValue);
    } else {
      console.log('用户取消了输入');
    }
  },
  fail: (error) => {
    console.error('调用失败:', error);
  }
});

解决方案 2: 自定义模态框

如果支付宝小程序的 my.prompt 也不符合你的需求，你可以考虑自定义一个模态框组件，通过 input 组件实现输入功能。

<template>
  <view v-if="showCustomModal">
    <view class="modal-mask"></view>
    <view class="modal-content">
      <view class="modal-header">提示</view>
      <view class="modal-body">
        <input v-model="inputValue" placeholder="请输入..." />
      </view>
      <view class="modal-footer">
        <button @click="handleCancel">取消</button>
        <button @click="handleConfirm">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showCustomModal: false,
      inputValue: ''
    };
  },
  methods: {
    showModal() {
      this.showCustomModal = true;
    },
    handleConfirm() {
      console.log('用户输入的内容:', this.inputValue);
      this.showCustomModal = false;
    },
    handleCancel() {
      console.log('用户取消了输入');
      this.showCustomModal = false;
    }
  }
};
</script>

<style>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 10px;
  width: 80%;
  max-width: 300px;
  z-index: 1000;
}

.modal-header {
  padding: 10px;
  border-bottom: 1px solid #eee;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-top: 1px solid #eee;
}

button {
  flex: 1;
  margin: 0 5px;
}
</style>
回到顶部