方法一:
这里主意el-input框的类型一定要写成type="text",否则方法不生效
引入import { watch } from 'vue',
在这里使用全局监听的方法如下:
watch(() => state.pixel, (newValue, oldValue) => {
const value = newValue.replace(/[^0-9]/g, '');
if (value !== newValue) {
state.pixel = value;
}
});
方法二:
在保持type="number"的属性下,限制不可输入特殊字符,使用@keydown事件来捕获按键事件方法如下:
//输入框不可以输入特殊字符
const handleKeyDown = (event) => {
const keyCode = event.keyCode;
// 允许输入数字、小数点、退格键和删除键
if (
(keyCode >= 48 && keyCode <= 57) || // 数字键
(keyCode >= 96 && keyCode <= 105) || // 数字键(小键盘)
keyCode === 190 || // 小数点
keyCode === 8 || // 退格键
keyCode === 46 // 删除键
) {
return true;
} else {
event.preventDefault();
return false;
}
};