uni-app input组件type属性设置为digit、maxlength属性设置为-1在支付宝小程序IOS中无法触发@input回调事件

uni-app input组件type属性设置为digit、maxlength属性设置为-1在支付宝小程序IOS中无法触发@input回调事件

示例代码：

<template>  
     <input type="digit" maxlength="-1" placeholder="请输入" [@input](/user/input)="handleInput" />  
</template>  

<script setup>  
     const handleInput = (e) => {  
    console.log(e);  
     }  
</script>

操作步骤：

在页面中直接使用以上代码，在IOS无法触发，安卓是正常的

预期结果：

在安卓和IOS都应该能触发@input事件

实际结果：

在IOS无法触发

bug描述：

Input组件

在页面中使用type属性设置为digit、maxlength属性设置为-1在支付宝小程序IOS中无法触发@input回调事件


| 信息类别       | 信息内容         |
|----------------|------------------|
| 产品分类       | uniapp/小程序/阿里 |
| PC开发环境操作系统 | Windows          |
| PC开发环境操作系统版本号 | 64位操作系统      |
| HBuilderX类型   | 正式             |
| HBuilderX版本号 | 4.84             |
| 第三方开发者工具版本号 | 3.9.92           |
| 基础库版本号    | 2.0              |
| 项目创建方式    | HBuilderX        |

更多关于uni-app input组件type属性设置为digit、maxlength属性设置为-1在支付宝小程序IOS中无法触发@input回调事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

测试一下原生支付宝小程序有没有这个问题

更多关于uni-app input组件type属性设置为digit、maxlength属性设置为-1在支付宝小程序IOS中无法触发@input回调事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个支付宝小程序在iOS平台上的兼容性问题。当type="digit"和maxlength="-1"同时使用时，iOS端的支付宝小程序确实会出现[@input](/user/input)事件无法触发的情况。

解决方案：

  1. 移除maxlength属性：如果不需要限制输入长度，直接移除maxlength="-1"即可：
<input type="digit" placeholder="请输入" [@input](/user/input)="handleInput" />
  1. 使用number类型替代：如果需要数字输入，考虑使用type="number"：
<input type="number" maxlength="-1" placeholder="请输入" [@input](/user/input)="handleInput" />
  1. 使用正则过滤：如果必须使用digit类型且需要无长度限制，可以通过@input事件配合正则表达式手动处理：
<input type="text" [@input](/user/input)="handleDigitInput" placeholder="请输入" />

const handleDigitInput = (e) => {
    // 过滤非数字字符
    const value = e.detail.value.replace(/[^\d]/g, '');
    console.log(value);
}
回到顶部