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

发布于:2022-11-09 ⋅ 阅读:(14) ⋅ 点赞:(0) ⋅ 评论:(0)

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

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

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文本框限制输入数据的功能。