拒绝vue输入中的非数字答案

【问题标题】：Rejecting non digits in vue input拒绝vue输入中的非数字
【发布时间】：2022-01-22 18:54:05
【问题描述】：

有人知道如何实现一个 VUE 输入字段，在用户尝试输入时拒绝输入非数字。

某种：

<b-form-input v-on:keypress="onlyNumber(...."

谢谢！

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

最简单的方法是将输入类型声明为数字。 <b-form-input type="number" ...

【讨论】：

【解决方案2】：

最后，对我来说，这可以完成工作：

    <input v-on:keydown="onlyNumber($event)" ... />

    

onlyNumber: function(evt) { //0035621
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57))) {
            evt.preventDefault();
        } else {
            return true;
        }
    }

【讨论】：

【解决方案3】：

如果 keyCode 不是用于非数字键，您可以使用 keydown 事件中按下的键的 keyCode 和 perevent 默认行为；

Vue 输入组件：

<b-form-input @keydown="onlyNumbers" />

onlyNumbers 方法是：

onlyNumbers(e) {
    if((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
}

【讨论】：

谢谢，但是，onlyNumbers 没有被调用 (¿?)
onlyNumbers 将被放置在的父组件的方法部分中，并且每次发出 keydown 事件时都会调用它。
@keydown.native?
这应该也可以，但是由于在 Vue3 中删除了 '.native'，最好从输入组件发出事件。
v3.vuejs.org/guide/migration/…