uni-app input number类型无法输入短横线

uni-app input number类型无法输入短横线

开发环境 版本号 项目创建方式
Windows 10 家庭中文版 HBuilderX

示例代码:

<input class="write-form" type="number" v-model="userInfo.mobile"  />

在input中输入1-2,最终userInfo.mobile的值会为空

操作步骤:

在input中输入1-1

预期结果:

应该为1-1

实际结果:

实际效果为空

bug描述:

<input class="write-form" type="number" v-model="userInfo.mobile"  />

在input中输入1-2,最终userInfo.mobile的值会为空


更多关于uni-app input number类型无法输入短横线的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

目前渲染层使用的 webview,input 存在限制,number 输入错误的值时无法获取到值
1-2 不是正确的 number 值需要使用 text

更多关于uni-app input number类型无法输入短横线的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是因为HTML5规范中type="number"的输入框不允许输入非数字字符。当输入包含短横线时,浏览器会将其视为无效值并清空输入内容。

解决方案:

  1. type改为text,并添加输入验证:
<input class="write-form" type="text" v-model="userInfo.mobile" @input="validateMobile" />
  1. 在methods中实现验证逻辑:
validateMobile(e) {
    let value = e.detail.value;
    // 允许数字和短横线,可根据需要调整正则
    if (!/^[\d-]*$/.test(value)) {
        this.userInfo.mobile = value.replace(/[^\d-]/g, '');
    }
}
回到顶部