uni-app 编译支付宝小程序时 input 内容无法手动删除

示例代码：

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
            <input type="text" placeholder="请输入手机号码"  />  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>

操作步骤：

预览真机进入支付宝小程序，在输入框中输入内容，无法删除

预期结果：

可以删除

实际结果：

无法删除

bug描述：

将之前的代码，编译成支付宝小程序时，在预览和真机调试上，input的内容无法使用手机键盘删除。我开了空白项目编译支付宝小程序测试后是没问题的，然后我又将自己的项目的首页清空，只留一个input发现bug依旧存在。

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

904cfd840a454d09b2d08c860755421c.zip

phonegap100 1楼•12 天前

请提供下测试工程。

yibo5220 2楼•12 天前

问一下解决了吗

sinazl 3楼•12 天前

2025-03-05 我使用基础的 input 运行到 HBuilderX 最新版运行到安卓真机支付宝小程序问题正常，如果仍有问题提供个复现工程。这个反馈比较少，你可以看看你同时的运行结果

htzhanglong 4楼•12 天前作者

在 uni-app 编译支付宝小程序时，如果遇到 input 输入框内容无法手动删除的问题，可能是由于以下几个原因导致的。你可以根据以下步骤进行排查和解决：

1. 检查 `v-model` 绑定

确保 input 组件的 v-model 绑定正确，并且绑定的数据没有被外部逻辑强制修改。

<template>
  <input v-model="inputValue" placeholder="请输入内容" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: '', // 确保初始值为空
    };
  },
};
</script>

如果 inputValue 被外部逻辑强制修改（例如设置为固定值），则可能导致无法删除输入内容。

2. 检查输入限制

确保没有对输入内容进行限制，导致无法删除字符。例如，设置了 maxlength 或正则校验。

<input v-model="inputValue" maxlength="10" />

如果 maxlength 设置过小，可能导致无法删除字符。检查并调整相关限制。

3. 支付宝小程序的兼容性问题

支付宝小程序的 input 组件可能存在兼容性问题。可以尝试以下方法：

使用 @input 事件手动更新数据：如果 v-model 在某些情况下表现异常，可以尝试改用 @input 事件手动更新数据。

<template>
  <input :value="inputValue" @input="handleInput" placeholder="请输入内容" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    handleInput(e) {
      this.inputValue = e.detail.value; // 手动更新数据
    },
  },
};
</script>

检查支付宝小程序的 input 组件文档：支付宝小程序的 input 组件可能有特定的行为或限制，查阅支付宝小程序官方文档以确认是否存在已知问题。

4. `uni-app` 版本问题

确保使用的 uni-app 版本是最新的，旧版本可能存在兼容性问题。可以通过以下命令更新 uni-app：

npm install [@dcloudio](/user/dcloudio)/uni-app[@latest](/user/latest)