页面中有数量文本框、单价文本框,在数量、单价文本框中输入数值时,计算出二者的乘积做为金额字段的值,见下图:
要求对数量文本框接收数据进行限制,规则如下:
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文本框限制输入数据的功能。