CODEWITHSUNDEEP
javascriptvue.js
DD DD
DD DD

Reputation: 1228

How to use onkeypress in vuejs

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.

Upvotes: 0

Views: 1941

Answers (2)

Asim Khan
Asim Khan

Reputation: 2039

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

Upvotes: 2

Johannes
Johannes

Reputation: 1488

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.

Upvotes: 0

Related Questions