uni-app input框type="number" 在ios端无效

uni-app input框type=“number” 在ios端无效

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.1.2

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：iphone8

页面类型：vue

打包方式：云端

App下载地址或H5网址：[https://www.keyue.store/shopping/downJAPK](https://www.keyue.store/shopping/downJAPK)

### 操作步骤：
```html
<input type="number" name="mobile"  placeholder="请输入手机号码" maxlength="11" />

预期结果：

只能输入数字

实际结果：

数字，字符，字母都能输入

bug描述：

手机号输入input，type=“number” ，本应该只能输入数字，且有字数验证，提交苹果审核时测试人员输入邮箱，导致验证不通过

更多关于uni-app input框type="number" 在ios端无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你的下载地址 是个安卓的包？ 不是iOS上有问题么？

更多关于uni-app input框type="number" 在ios端无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的iOS系统兼容性问题。在iOS的Webview中，type="number"输入框确实不会严格限制非数字字符的输入。建议采用以下解决方案：

  1. 使用type="digit"替代type="number"，这是uni-app的扩展类型，在iOS端能更好地限制输入数字：
<input type="digit" name="mobile" placeholder="请输入手机号码" maxlength="11" />
  1. 同时添加输入验证，在@input或@blur事件中处理：
methods: {
  validateMobile(e) {
    let value = e.detail.value;
    // 移除非数字字符
    value = value.replace(/\D/g, '');
    // 限制长度为11位
    if (value.length > 11) {
      value = value.slice(0, 11);
    }
    this.mobile = value;
  }
}
  1. 在提交时做最终验证：
if (!/^1\d{10}$/.test(this.mobile)) {
  uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
  return;
}
回到顶部