How to use onkeypress in vuejs

Question

I want to block writing special characters in input of Vue.
First, I made a function like below.

blockSpecialChar(e) {
      console.log(e.keyCode);
      const k = e.keyCode;
      return (
        (k > 64 && k < 91) ||
        (k > 96 && k < 123) ||
        k == 8 ||
        (k >= 48 && k <= 57)
      );
    }

And I connect it with the code below.

         <input
            type="test"
            placeholder="phone"
            v-model="pin.phoneNumber"
            v-on:keypress.prevent="blockSpecialChar(e)"
          />

But when I type, it says 'e is not defined'. How can I make this correctly? Thank you so much for reading.

v-on:keypress.prevent="blockSpecialChar" or v-on:keypress.prevent="e => blockSpecialChar(e)" — Emīls Gulbis
– Emīls Gulbis, Commented Sep 19, 2019 at 12:14
Thank you so much. 'e' is defined well. But the problem is that input doesn't have anything even though I type something. Is my blockspecialchar function correct? — DD DD
– DD DD, Commented Sep 19, 2019 at 12:25

Asim Khan · Accepted Answer · 2019-09-19 12:22:43Z

2

you dont need to pass params when passing a method,

<input
    type="test"
    placeholder="phone"
    v-model="pin.phoneNumber"
    v-on:keypress.prevent="blockSpecialChar"
/>

and this code should work now

blockSpecialChar(e) {
      console.log(e.keyCode);
      const k = e.keyCode;
      return (
        (k > 64 && k < 91) ||
        (k > 96 && k < 123) ||
        k == 8 ||
        (k >= 48 && k <= 57)
      );
    }

answered Sep 19, 2019 at 12:22

Asim Khan

2,05914 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johannes · Accepted Answer · 2019-09-19 12:17:50Z

0

You do not need to pass e explicitly to the keypress function.

Just write:

<input
    type="test"
    placeholder="phone"
    v-model="pin.phoneNumber"
    v-on:keypress.prevent="blockSpecialChar"
/>

Because this is a callback function, e will be automatically initialized in your function block.

answered Sep 19, 2019 at 12:17

Johannes

1,4871 gold badge14 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to use onkeypress in vuejs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related