100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Element-ui input 输入框限制只能输入数字的问题

Element-ui input 输入框限制只能输入数字的问题

时间:2022-07-02 23:19:03

相关推荐

Element-ui input 输入框限制只能输入数字的问题

需求说明

后台管理系统,使用element-ui el-input组件,要求只能输入数字,最先使用的办法:

<el-inputv-model.number='count'type='number'maxLength='9'/>复制代码

存在的问题

1. maxLength不生效2. 可以输入e3. 可以输入1.1.....11...1复制代码

目前解决的办法(可以生效)

<el-inputv-model='count'oninput="value=value.replace(/[^\d]/g,'')"maxLength='9'/>复制代码

目前存在的问题

用正则限制了只能输数字后,如果某次操作输入的是中文,会导致后续再输入数字,也无法更新v-model的值,如下图看了源码得知当 isOnComposition === true 时,是不会去更新值的;复制代码

拓展

保留小数点后几位复制代码

<el-inputv-model='number'oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"maxLength='9'/>复制代码

v-model没有值的的问题我是这么解决的

<el-inputv-model='count'ref='ele'oninput="value=value.replace(/[^\d]/g,'')"maxLength='9'/>const elem = this.$refs.eleif(elem.isOnComposition) { // em..其实这个判断可以去了this.count = elem.currentValue}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。