elementui input输入框 Number类型限制长度
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"/> // 2022-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)}" >
上一篇:
多线程四大经典案例