Element input输入框 限制输入数据规则

页面中有数量文本框、单价文本框，在数量、单价文本框中输入数值时，计算出二者的乘积做为金额字段的值，见下图：

要求对数量文本框接收数据进行限制，规则如下：

1、只能输入数值；

2、整数部分最多9位，小数部分最多3位；

3、不能输入以0开头的数值；

4、不能输入科学计数法的字符e或E。

上述需求实现如下：

一、HMTL模板代码

<el-form-item prop="quantity">
    <el-input 
        type="number"
        v-model="quantity" 
        placeholder="请输入" 
        @input="(val) => handleQuantityInputEvent(val)"
        oninput="if(isNaN(value)) { value = parseFloat(value) }
                if(value < 0) { value = 0 }
                if(value.indexOf('.') == -1 && value.length > 9) { value = value.slice(0,9) } 
                if(value.indexOf('.') >= 9) { value = value.slice(0,9) + value.slice(value.indexOf('.'),value.indexOf('.') + 4) }
                if(value.indexOf('.') > -1 && value.indexOf('.') <= 9) { value=value.slice(0,value.indexOf('.')) + value.slice(value.indexOf('.'),value.indexOf('.') + 4) } 
                if(value.indexOf('0') == 0 && value.indexOf('.') !== -1) { value=value.slice(0) }
                if(value.indexOf('0') == 0 && value.indexOf('.') === -1 && value.length > 1) { value=value.slice(1) }"
        @keydown.native="limitInputValue"
    />
</el-form-item>

有几点需要注意：

1、这里使用的是el-input组件（并不是el-input-number组件）；

2、将el-input的type属性设置为了number，这样就只能输入数值了（用户不能输入字符、汉字或其他字符了）；

3、使用<el-input type="number" />后，用户是可以在文本框中输入字母e或E的（e或E是科学计数法形式），但我们需要禁止e或E。

在oninput事件中进行了规则设置，解释如下：

1、if(isNaN(value)) { value = parseFloat(value) }

如果用户输入了非数值，此时isNaN函数返回真，执行parseFloat方法，将数据转换成数值，如用户输入的是123a，那么经parseFloat('123a')转换后，文本框中的数据则成为了123

2、 if(value < 0) { value = 0 }

如果用户输入的数值小于0，则将其转换为0

3、if(value.indexOf('.') == -1 && value.length > 9) { value = value.slice(0,9) }

如果用户输入的数值没有小数点（输入的是整数），且长度大于9位，则取前9位

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

如果小数点位置在9位或大于9位，则取出整数部分（value.slice(0,9)）和3位小数（value.slice(value.indexOf('.'),value.indexOf('.') + 4)）

5、 if(value.indexOf('.') > -1 && value.indexOf('.') <= 9) { value=value.slice(0,value.indexOf('.')) + value.slice(value.indexOf('.'),value.indexOf('.') + 4) }

如果存在小数点且小数点位置小于9（说明整数部分不足9位），此时取出全部整数部分（value.slice(0,value.indexOf('.'))）和3位小数（value.slice(value.indexOf('.'),value.indexOf('.') + 4)）

6、if(value.indexOf('0') == 0 && value.indexOf('.') !== -1) { value=value.slice(0) }

如果输入的第一位数值是0，且输入了小数点（即输入的是”0.x“，则从第一位截取保留数值

7、if(value.indexOf('0') == 0 && value.indexOf('.') === -1 && value.length > 1) { value=value.slice(1) }"

如果输入的第一位数值是0，但未输入小数点，且数值长度大于1（输入的是整数，且第一位是0），此时从第二位开始截取（即移除前置0）

@keydown.native="limitInputValue"的解释： 

在keydown事件中调用limitInputValue方法，实现禁止用户输入字符e或E。

注意：

keydown上使用了native修饰符，给el-input绑定了原生的keydown事件，这样就可以获取到event对象，做进一步操作了。

二、JS代码

limitInputValue(e) {
  let key = e.key
  if (key === 'e' || key === 'E') {
    e.returnValue = false
    return false
  }
  return true
}

上述代码获取输入的数据（e.key），如果输入的是e或E，则取消keydown事件（取消了用户的输入）。

三、CSS样式

 隐藏文本框右侧上下箭头的样式如下：

<style lang="scss" scoped>
    /deep/ input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    }
    
    /deep/ input::-webkit-outer-spin-button{
    -webkit-appearance: none !important;
    }
    
    /deep/ input[type="number"]{
    -moz-appearance: textfield;
    }
</style>

至此，已经实现了input文本框限制输入数据的功能。