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"
的输入框不允许输入非数字字符。当输入包含短横线时,浏览器会将其视为无效值并清空输入内容。
解决方案:
- 将
type
改为text
,并添加输入验证:
<input class="write-form" type="text" v-model="userInfo.mobile" @input="validateMobile" />
- 在methods中实现验证逻辑:
validateMobile(e) {
let value = e.detail.value;
// 允许数字和短横线,可根据需要调整正则
if (!/^[\d-]*$/.test(value)) {
this.userInfo.mobile = value.replace(/[^\d-]/g, '');
}
}