uni-app中ios下input type="number"可输入字符符号，且加type="number"后@input处理数据失效

uni-app中ios下input type="number"可输入字符符号，且加type="number"后@input处理数据失效

| 开发环境 | 版本号   | 项目创建方式 |
|----------|----------|--------------|
| Windows  | windows 10 专业版 | HBuilderX     |

# 示例代码：

// html
<input
class=“con autoStyle”
custom-style=“stylein” border=“border” placeholder=“请输入验证码”
v-model=“model.code”
type=“number”
@input=“phoneNumbe”

</input>

// js
phoneNumbe(){
setTimeout(()=>{
this.model.code=this.model.code.replace(/[^\d]/g,’’)
},0)
},


## 操作步骤：
直接操作就可以

## 预期结果：
希望在ios下只能输入数字

## 实际结果：
可以输入字符，并且用[@input](/user/input)处理没有效果

## bug描述：
input  type="number"  情况下用[@input](/user/input)处理当前数据无效

更多关于uni-app中ios下input type="number"可输入字符符号，且加type="number"后@input处理数据失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

是的，我也遇到了,IDE版本为3.1.12，H5页面，type为number时，ios下仍然可以输入汉字，字符等，而且设置的maxlength也失效了…安卓是正常的。我试了一下，2.8.13版本的就没这个问题

更多关于uni-app中ios下input type="number"可输入字符符号，且加type="number"后@input处理数据失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个iOS系统与uni-app框架的兼容性问题。在iOS系统中，type="number"的输入框允许输入符号字符（如+、-、小数点等），这是系统默认行为。同时，当使用type="number"时，[@input](/user/input)事件在某些情况下可能无法正确触发或处理数据。

建议的解决方案：

  1. 将type="number"改为type="text"，这样可以确保[@input](/user/input)事件正常触发
  2. 在[@input](/user/input)事件处理函数中通过正则表达式严格限制只能输入数字

修改后的代码示例：

// html
<input  
class="con autoStyle"  
custom-style="stylein"
border="border"
placeholder="请输入验证码"  
v-model="model.code"  
type="text"  
[@input](/user/input)="handleInput"  
></input>

// js
handleInput(e){
    // 过滤非数字字符
    this.model.code = e.detail.value.replace(/[^\d]/g,'')
}
回到顶部