解决ElementUI Input 输入框type=“number“时maxlength失效及可以输入字母e的问题

问题描述：

在使用Element前端组件时，发现把Input 输入框的type设置为number时，会造成maxlength属性失效的问题，可以输入很长的数字导致字段超长，另外min属性和max属性也只是限制输入框右边箭头调整的范围，根本无法限制住手动输入数值的范围，以及还可以输入“e”，“+”，“-”字符等问题。下面就来一一解决。

解决maxlength属性失效

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

完整示例代码：

<el-input type="number" v-model="businessData.totalNumber"
     oninput="if(value.length>10)value=value.slice(0,10)"></el-input>

去掉右边箭头及鼠标滚轮调整

<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>

注意：/deep/还有另外一种写法::v-deep

解决鼠标滚轮调整方式二

<el-form-item key="data" label="线圈数量" prop="data">
     <el-input 
     @mousewheel.native.prevent  //谷歌浏览器 禁止滚轮滚动修改数据
     @DOMMouseScroll.native.prevent  //火狐浏览器 禁止滚轮滚动修改数据
     type="number"                  //设定输入框输入值为number类型
     οninput="if(value.length>16)value=value.slice(0,16)"  //设置输入框 输入的最大长度为16
     v-model.trim="deviceForm.data"                      //trim表示过滤掉输入的空格，只过滤两头空格 不过滤中间空格
     placeholder="请输入数值">
     </el-input>
</el-form-item>

解决可以输入“e”，“+”，“-”字符问题

1. 方法一：用@keydown.native禁用（注意这里用es6的箭头语法和includes语法）

@keydown.native="e=>e.returnValue=(['e','E','-','+'].includes(e.key))?false:e.returnValue"

完整示例代码：

<el-input type="number" v-model="businessData.totalNumber"
    @keydown.native="e=>e.returnValue=(['e','E','-','+'].includes(e.key))?false:e.returnValue"></el-input>

2. 方法二：用onkeypress禁用（适用于html原生的input）
   onkeypress比@keydown.native更原生，所以写法有不同

onkeypress="return(['e','E','-','+'].includes(event.key))?false:event.key"

完整示例代码：

<input type="number" v-model="businessData.totalNumber"
    onkeypress="return(['e','E','-','+'].includes(event.key))?false:event.key"></input>

完整案例

<el-input type="number" v-model="businessData.totalNumber"
    oninput="if(value.length>10)value=value.slice(0,10)"
    @keydown.native="e=>e.returnValue=(['e','E','-','+'].includes(e.key))?false:e.returnValue"></el-input>

参考文章：

https://blog.csdn.net/SanOrintea/article/details/122558001
https://blog.csdn.net/weixin_45274678/article/details/129147252
https://blog.csdn.net/Alive_tree/article/details/108831950