el-input只允许输入数字
有时候输入框里只允许输入数字法一:<el-inputv-model="inputValue"onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))"></el-input>
·
有时候输入框里只允许输入数字
法一:
<el-input
v-model="inputValue"
onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))">
</el-input>
如果是单纯输入的话,以上代码是完全可以满足只允许输入数字的需求的,不过会有个小问题,就是在复制粘贴的情况下可以把中文给带进输入框中,那么如何去解决这个问题呢
我们可以加上type=number的属性来解决以上出现的问题,代码如下
<el-input
v-model="inputValue"
type="number"
onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))">
</el-input>
以上写法在移动端不生效
测试设备为 iPhone 12 Pro,系统版本为14.8.1
浏览器环境为微信内置浏览器
微信版本为Version 8.0.29
其他版本表现情况未知
法二:
基于以上设置,如果还有譬如以下的其他限制:
- 仅数字类型:1~100的输入整数
- 仅数字类型输入,>1的整数,长度6位数
可以用以下方法
handlerValueChange(condition, target, field) {
if (condition) {
target.lastValue = target.value;
} else {
target.value = target.lastValue;
this.form[field] = target.value;
}
},
// 仅数字类型:1~100的输入整数,其他不上屏
onPercentageKeypress(event) {
const regexp = new RegExp(`^[1-9][0-9]{0,2}$`);
const value = event.target.value;
this.handlerValueChange(
(regexp.test(value) && !isNaN(+value) && +value < 101 && +value > 0) ||
value === "",
event.target,
'percentage'
);
},
// 仅数字类型输入,>1的整数,长度6位数,其他或超出不上屏
onPrizeKeypress(event) {
const regexp = new RegExp(`^[1-9][0-9]{0,5}$`);
const value = event.target.value;
this.handlerValueChange(regexp.test(value) || value === "", event.target, 'prize');
},
<el-input
v-model="form.percentage"
placeholder="请输入内容"
type="number"
@keyup.native="onPercentageKeypress"
@change.native="onPercentageKeypress"
></el-input>
<el-input
v-model="form.prize"
type="number"
@keyup.native="onPrizeKeypress"
@change.native="onPrizeKeypress"
></el-input>
第二种方法可以在移动端使用,目前没有发现不兼容设备
关于移动端使用第一种方法有问题具体原因有待考究,后面有查询到具体原因的话,再继续更新……
以上是我的总结,我仅在Chrome49、Chrome65预览过,如果有哪位同学使用过后发现有兼容性问题,欢迎吐槽
更多推荐
已为社区贡献1条内容
所有评论(0)