uni-app 【报Bug】input type为number时 输入-- 会导致长度限制失效 @input监听失效
uni-app 【报Bug】input type为number时 输入-- 会导致长度限制失效 @input监听失效
示例代码：
<input type="number" [@input](/user/input)="input" maxlength="10"/>
input(e){
console.log(e.detail.value);
}
操作步骤：
- 输入数字
预期结果：
- 无法输入 且能限制长度 @input监听正常
实际结果：
- 能输入，长度限制失效，@input监听无内容
bug描述：
<input type="number" [@input](/user/input)="input" maxlength="10"/>
- 输入框能输入±.
- 且在输入俩–的时候，maxlength失效，@input监听的e.detail.value为 “”
具体的可以看下图
| 信息类别 | 详细信息 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| PC系统版本 | win10 版本 10.0.19041.867 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.1.4 |
| 手机系统 | Android |
| 手机系统版本 | Android 10 |
| 手机厂商 | 魅族 |
| 手机机型 | 17 |
| 页面类型 | vue |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
更多关于uni-app 【报Bug】input type为number时 输入-- 会导致长度限制失效 @input监听失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
18 回复
防止图裂 备个份
更多关于uni-app 【报Bug】input type为number时 输入-- 会导致长度限制失效 @input监听失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
不是这里导致的，是浏览器（webview）的 input 表现这样，这里虽然努力了但是没有纠正过来，注释部分那是一个两难全的问题：强制验证将导致用户无法输入负号，不增加强制验证将导致用户输入错误的符号后无法纠正
这是一个已知的uni-app框架在处理input type="number"时的兼容性问题。当输入非数字字符（如–、±等）时，maxlength属性失效且@input事件返回空值。
问题分析：
- type="number"的input在移动端会调起数字键盘，但HTML5规范对非数字字符的处理存在差异
- 连续输入"–"时，浏览器可能将其解析为无效数值，导致maxlength校验被绕过
- @input事件在输入无效字符时可能无法正确获取value值
临时解决方案：
input(e){
let value = e.detail.value;
// 手动过滤非数字字符
value = value.replace(/[^\d]/g, '');
// 手动限制长度
if(value.length > 10) {
value = value.slice(0, 10);
}
console.log(value);
}