时间戳

首页 > 解决方案 > 如何使用 VueJS 防止数字输入

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

问题描述

我需要创建一个验证，以防止用户在文本框中输入数字输入。我找到了一些使用本机 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();
    }
}

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

标签： javascriptvue.jsvuejs2

解决方案

正如我的评论中提到的，keyup将触发太晚以防止将值输入到输入字段中。例如，考虑按住一个键重复输入相同的值；没有钥匙了。

相反，使用keydown或keypress

<input @keypress="preventNumericInput">

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

推荐阅读