el-input type=number的限制使用

<el-input type="number"
 oninput="if(value.length>10)value=value.slice(0,10)"
 @keyup.enter.native="query()"
 onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
 :max="99999999">
 </el-input>

oninput 是个自定义事件在事件里面获取输入的数字长度，来进行判断如果大于规定长度就进行剪切。
keyup.enter.native 是个键盘回车事件，当按下Enter键时触发query()事件。
max为输入框的最大值，如果input的type=number那么输入框内是输入不了字符的。

number框解决输入e的问题
主要原因是：e在数学上代表的是无理数，是一个无限不循环的小数，其值约为2.7182818284，所以在输入e的时候，输入框会把e当成一个数字看待。
可以采用下面的方式来避免这个BUG，在input标签中添加如下属性：

onKeypress=“return(/[\d.]/.test(String.fromCharCode(event.keyCode)))”

show-password 加上这个属性输入字符进行隐藏一般用于密码框使用

Tips：

1、el-input type=number时去掉右侧加减箭头

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/deep/ input[type="number"] {
  -moz-appearance: textfield;
}

2、其他的小技巧
保留2位小数

onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"

type='number'时候的限制长度

oninput="if(value.length>9)value=value.slice(0,9)"

限制数值大小

οninput="if(value>10000)value=10000"

限制输入e

οnkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))'

限制3位小数

oninput="if(value.indexOf('.') > 0){value=value.slice(0,value.indexOf('.') + 4)}"

同时限制3位小数和限制长度

oninput="if(value.length>10)value=value.slice(0,10) ;if(value.indexOf('.') > 0){value=value.slice(0,value.indexOf('.') + 4)}"

真实场景示例：

  <el-form-item label="距离(km)" label-width="100px" style="width:300px" prop="distance">
      <el-input type='number' :min="0" v-model="formDialog.distance" oninput="if(value.length>10)value=value.slice(0,10) ;if(value.indexOf('.') > 0){value=value.slice(0,value.indexOf('.') + 4)}" onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"></el-input>
  </el-form-item>

最后编辑于：2022.04.12 09:44:25