javascript - Implementing @keypress in Vue - Stack Overflow

I am trying to implement onkeypress event in a Vue ponent. On keypress I want to restrict all key codes except numbers. I am trying the following.

Using the onkeypress event, things work fine!

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

When I convert the above to be used in Vue, it does not work!!! :(

<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)));
        }
    }

What am I missing?? I don't understand what is going wrong? Any help is hugely appreciated!

I am trying to implement onkeypress event in a Vue ponent. On keypress I want to restrict all key codes except numbers. I am trying the following.

Using the onkeypress event, things work fine!

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

When I convert the above to be used in Vue, it does not work!!! :(

<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)));
        }
    }

What am I missing?? I don't understand what is going wrong? Any help is hugely appreciated!

• javascript
• vue.js
• vuejs2
• vue-ponent
• onkeypress

Share Improve this question Follow edited Jul 15, 2020 at 16:03 emen 6,3281212 gold badges5959 silver badges9696 bronze badges asked Nov 16, 2018 at 23:48 ShreerangShreerang 38711 gold badge44 silver badges1515 bronze badges 10

• you could use v-model.number="yourmodel" @input="restrictChars" – Boussadjra Brahim Commented Nov 16, 2018 at 23:51
• I am using v-model.number, but I don't see any documentation on @input. Would you be kind enough to send me a link? – Shreerang Commented Nov 16, 2018 at 23:55
• Also this @input thing does not seem to be working across browsers. Works on chrome, not on Safari and Firefox. – Shreerang Commented Nov 16, 2018 at 23:59
• i think the problem is in your method logic not in the events – Boussadjra Brahim Commented Nov 17, 2018 at 0:12
• What do you think the problem is? The method is supposed to return a boolean based on the pressed key. Which means true for all numbers and false for everything else. – Shreerang Commented Nov 17, 2018 at 0:15

 |  Show 5 more ments

1 Answer 1

Sorted by: Reset to default 4

Figured out the problem. Though I was returning a boolean when reading the keyCodes, I wasn't preventing the default keypress action. The restrictChars method should look something like this!

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