uni-app IOS上input设置位number，输入中文出错

uni-app IOS上input设置位number，输入中文出错

示例代码：

<input  
    type="number"   
    :show-confirm-bar="false"  
    auto-blur  
    :focus="true"  
    :maxlength="6"  
    v-model="value"  
    :password="false"  
    placeholder="验证码"/>

操作步骤：

  • 直接输入中文，查看v-model绑定的value，或先输入数字，在输入中文

预期结果：

  • 不能输入数字以外的字符

实际结果：

  • 可以输入数字以外的字符，并且值为空

bug描述：

ios上input设置为number输入中文时所绑定的变量或@input会变成空，并且在输入中文前已经输入了数字，然后在输入中文值就会变成空


| 信息类别     | 信息内容         |
|--------------|------------------|
| 产品分类     | uniapp/App       |
| PC开发环境   | Windows          |
| PC系统版本   | windows10        |
| HBuilderX类型| 正式             |
| HBuilderX版本| 3.0.7            |
| 手机系统     | iOS              |
| 手机系统版本 | IOS 14           |
| 手机厂商     | 苹果             |
| 手机机型     | iPhone XS Max    |
| 页面类型     | vue              |
| 打包方式     | 云端             |
| 项目创建方式 | HBuilderX        |

更多关于uni-app IOS上input设置位number，输入中文出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

示例可使用https://ext.dcloud.net.cn/plugin?id=2917查看

更多关于uni-app IOS上input设置位number，输入中文出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


H5和App写password属性时，type失效，见文档

这是一个iOS平台上的已知问题。在uni-app中，当input类型设置为number时，iOS设备确实会出现可以输入中文但值会变为空的情况。

解决方案建议：

  1. 使用正则表达式过滤非数字字符：
<input 
    type="text" 
    @input="handleInput"
    v-model="value"
    placeholder="验证码"/>

<script>
methods: {
    handleInput(e) {
        this.value = e.detail.value.replace(/[^\d]/g, '')
    }
}
</script>
  1. 或者使用uniapp的input组件的confirm-type属性设置为"done"：
<input 
    type="number" 
    confirm-type="done"
    v-model="value"
    placeholder="验证码"/>
回到顶部