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

36,494 阅读1分钟

需求说明

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

<el-input
 v-model.number='count'
 type='number'
 maxLength='9'
/>

存在的问题

1. maxLength不生效
2. 可以输入e
3. 可以输入1.1.....11...1

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

<el-input
 v-model='count'
 oninput="value=value.replace(/[^\d]/g,'')"
 maxLength='9'
/>

目前存在的问题

用正则限制了只能输数字后,如果某次操作输入的是中文,会导致后续再输入数字,
也无法更新v-model的值,如下图

看了源码得知当 isOnComposition === true 时,是不会去更新值的;

示例

拓展

保留小数点后几位
<el-input
 v-model='number'
 oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"
 maxLength='9'
/>

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

<el-input
 v-model='count'
 ref='ele'
 oninput="value=value.replace(/[^\d]/g,'')"
 maxLength='9'
/>

const elem = this.$refs.ele
if(elem.isOnComposition) {  // em..其实这个判断可以去了
    this.count = elem.currentValue
}

希望看到的大佬指出存在问题或者说下更好的解决办法, 谢谢!