el-input限制输入 -
时间: 2023-11-23 10:07:14 浏览: 105
vue:el-input输入时限制输入的类型操作
5星 · 资源好评率100%
el-input可以通过设置type属性来限制输入的类型,常见的type类型有text、textarea、password、url、email、date等。此外,还可以通过设置maxlength属性来限制输入的最大长度,通过设置minlength属性来限制输入的最小长度。同时,还可以通过设置正则表达式来限制输入的格式。
以下是一个el-input限制输入的例子:
```html
<template>
<div>
<el-input v-model="inputValue" type="number" :maxlength="5" @keydown="handleInput"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
},
methods: {
handleInput(event) {
const keyCode = event.keyCode;
// 允许输入数字、小数点、负号和删除键
if (!((keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105) || keyCode === 190 || keyCode === 189 || keyCode === 8)) {
event.preventDefault();
}
}
}
}
</script>
```
上述代码中,el-input的type属性被设置为number,maxlength属性被设置为5,表示最多只能输入5个字符。同时,通过@keydown事件监听输入事件,通过判断输入的keyCode来限制输入的类型,只允许输入数字、小数点、负号和删除键。
阅读全文