javascript - 如何使用 VueJS 防止数字输入

Question

我需要创建一个验证来防止用户在文本框中输入数字。我找到了一些使用 native javascript 的解决方案，但它不适合我。

在我的文本框中我有这个触发器

v-on:keyup="preventNumericInput($event)"> 

然后在我的 Vue 上我在我的类上创建了一个函数

preventNumericInput($event) {
    console.log($event.keyCode); //will display the keyCode value
    console.log($event.key); //will show the key value

    var keyCode = ($event.keyCode ? $event.keyCode : $event.which);
    if (keyCode > 47 && keyCode < 58) {
        $event.preventDefault();
    }
}

你能帮我解决这个问题吗？

Answer 1

正如我在评论中提到的，keyup 触发得太晚，无法阻止将值输入到输入字段中。例如，考虑按住一个键重复输入相同的值；没有键 up。

相反，使用keydown 或keypress

<input @keypress="preventNumericInput">

演示~ http://jsfiddle.net/wadt08jm/1/