el-input 如何限制只能输入数字,并且限制输入数字的长度与小数位数
时间: 2023-06-23 07:49:51 浏览: 211
您可以使用 `el-input` 的 `onkeypress` 和 `oninput` 事件来限制只能输入数字,并且在输入过程中限制数字的长度与小数位数。
以下是一个示例代码:
```html
<template>
<el-input v-model="number" @keypress="onKeyPress" @input="onInput"></el-input>
</template>
<script>
export default {
data() {
return {
number: ''
};
},
methods: {
onKeyPress(event) {
const keyCode = event.keyCode;
// 0-9、小数点、退格键、删除键
if (
(keyCode >= 48 && keyCode <= 57) ||
(keyCode === 46) ||
(keyCode === 8) ||
(keyCode === 46)
) {
event.returnValue = true;
} else {
event.returnValue = false;
}
},
onInput(event) {
const value = event.target.value;
// 限制数字的长度和小数位数
if (value.indexOf('.') !== -1) {
const integerPart = value.split('.')[0];
const decimalPart = value.split('.')[1];
if (integerPart.length > 5 || decimalPart.length > 2) {
event.target.value = this.number;
} else {
this.number = value;
}
} else {
if (value.length > 5) {
event.target.value = this.number;
} else {
this.number = value;
}
}
}
}
};
</script>
```
在上面的代码中,`onKeyPress` 方法用于限制只能输入数字和小数点,以及退格键和删除键。`onInput` 方法用于限制数字的长度和小数位数,如果超出限制,则将输入框的值恢复为原来的值。
请注意,以上代码仅为示例,实际使用时需要根据实际情况进行修改和优化。
阅读全文