在Vue中实现@keypress

Question

我正在尝试在Vue组件中实现onkeypress事件。在按键时，我想限制除数字以外的所有按键代码。我正在尝试以下方法。

使用onkeypress事件，一切正常！

<input type="number" onkeypress="return (event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode)));" />

当我将以上内容转换为在Vue中使用时，它不起作用！！！ ：（

<input type="number" @keypress="restrictChars($event)" />

<script> export default { name: 'quantity-selector', methods: { restrictChars: function($event) { return ($event.charCode === 0 || /\d/.test(String.fromCharCode($event.charCode))); } }

我想念什么？我不明白怎么了？任何帮助深表感谢！

Answer 1

找出问题所在。尽管在读取keyCodes时返回的是布尔值，但是我并没有阻止默认的keypress操作。 restrictChars方法应如下所示！

restrictChars: function($event) {
    if ($event.charCode === 0 || /\d/.test(String.fromCharCode($event.charCode))) {
        return true
    } else {
        $event.preventDefault();
    }
}