通过使用以下指令设置 v-restrict.number.decimal，这是处理特定问题（仅限数字和“点”）的更好方法。它还有一些奖励代码来支持仅字母或字母数字。你也可以只允许“点”，虽然我不知道你为什么会这样做。如果快速打字，它不会允许额外的字符“偷偷溜走”。它还支持复制/粘贴、删除和其他一些用户希望仍然可以通过输入工作的键：
Vue.directive('restrict', {
bind (el, binding) {
el.addEventListener('keydown', (e) => {
// delete, backpsace, tab, escape, enter,
let special = [46, 8, 9, 27, 13]
if (binding.modifiers['decimal']) {
// decimal(numpad), period
special.push(110, 190)
}
// special from above
if (special.indexOf(e.keyCode) !== -1 ||
// Ctrl+A
(e.keyCode === 65 && e.ctrlKey === true) ||
// Ctrl+C
(e.keyCode === 67 && e.ctrlKey === true) ||
// Ctrl+X
(e.keyCode === 88 && e.ctrlKey === true) ||
// home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
return // allow
}
if ((binding.modifiers['alpha']) &&
// a-z/A-Z
(e.keyCode >= 65 && e.keyCode <= 90)) {
return // allow
}
if ((binding.modifiers['number']) &&
// number keys without shift
((!e.shiftKey && (e.keyCode >= 48 && e.keyCode <= 57)) ||
// numpad number keys
(e.keyCode >= 96 && e.keyCode <= 105))) {
return // allow
}
// otherwise stop the keystroke
e.preventDefault() // prevent
}) // end addEventListener
} // end bind
}) // end directive
使用方法：
<!-- number and decimal -->
<input
v-model="test"
v-ep-restrict.number.decimal
...
/>
<!-- alphanumeric (no decimal) -->
<input
v-model="test2"
v-ep-restrict.alpha.number
...
/>
<!-- alpha only -->
<input
v-model="test3"
v-ep-restrict.alpha
...
/>
这可以修改为几乎任何场景的基础，一个很好的关键代码列表是here