elementui input输入框 Number类型限制长度

css

<style lang="scss" scoped>/deep/.el-input input::-webkit-outer-spin-button,/deep/.el-input input::-webkit-inner-spin-button {-webkit-appearance: none!important;}/deep/.el-input input[type="number"]{-moz-appearance: textfield;}/deep/.el-input .el-input__inner {line-height: 1px!important;}</style>

js

// 此例子是 允许输入小数点 整数最大3位 保留2位小数<el-input v-model.number="xxxx" type="number" @keydown.native="e=>e.returnValue=(['e','E','-','+'].includes(e.key))?false:e.returnValue" oninput="value=value>=10**3?value.slice(0,3):value.indexOf('.')>0?value.slice(0,value.indexOf('.')+3):value"/>// -02-15更新：在更新了node版本之后居然发现不行了，问题出在οninput="value=value"，的时候，不能输入小数点，反而会光标弹回最前。不知道为啥会这样，但是可以避免，代码如下：<el-input v-model.number="ruleForm.rechargeUse[index]" type="number"@keydown.native="e=>e.returnValue=(['e','E','-','+'].includes(e.key))?false:e.returnValue"oninput="if(value>=10**3){value=value.slice(0,3)};if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"/>//就是取消了value=value这个赋值，改为不做任何处理。

如果是不用elmentui的innput。用html原生的input。仅需要把@keydown.native替换成onkeypress，onkeypress比@keydown.native更原生，所以写法有不同，写法如下

<input v-model="dataForm.number" type="number"onkeypress="return(['e','E','-','+'].includes(event.key))?false:event.key"oninput="if(value>=10**3){value=value.slice(0,3)};if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+7)}" >

原文链接：/SanOrintea/article/details/122558001