el-input onkeyup 设置只能输入数字和小数
时间: 2023-09-29 09:02:47 浏览: 103
可以使用正则表达式和事件监听来实现只能输入数字和小数的功能。
HTML代码:
```html
<el-input v-model="inputValue" @keyup="handleInput"></el-input>
```
Vue代码:
```javascript
export default {
data() {
return {
inputValue: ''
}
},
methods: {
handleInput() {
// 使用正则表达式过滤非数字和小数点字符
this.inputValue = this.inputValue.replace(/[^\d.]/g, '');
// 只保留第一个小数点,删除多余的小数点
this.inputValue = this.inputValue.replace(/^\./g, '').replace(/\.{2,}/g, '.');
// 如果小数点在第一位,自动补0
this.inputValue = this.inputValue.replace(/^(\d+)\.(\d+)/g, function (match, p1, p2) {
return p1 + '.' + p2.replace(/\./g, '');
});
}
}
}
```
这段代码使用了 `replace()` 方法和正则表达式来过滤非数字和小数点字符,只保留第一个小数点,如果小数点在第一位则自动补0。然后将过滤后的值赋值给 `inputValue` 变量,实现了只能输入数字和小数点的功能。
阅读全文