CODEWITHSUNDEEP
vue.jsvuejs2
Juliver Galleto
Juliver Galleto

Reputation: 9047

unable to access keyCode/key event on input event

I'm trying to console log the event key on input bound input event on the input, below is what I've tried

<div id="app">
    <input @input="onInput" @keyup="onKeyUp" type="text">
</div>

vue script

new Vue({
    el : '#app',
    methods : {
        onInput(event){
            console.log(event.key); // returns undefined ?
            console.log(event.keyCode); // returns undefined ?
        }
        onKeyUp(event){
            console.log(event.key); // returns the key name
            console.log(event.keyCode); // returns the keycode ?
        }
    }
});

but it gives me undefined but on keyup, it gives me the key name and keycode just what I expected, only on the onInput method gives me undefined. Any help, ideas?

Upvotes: 2

Views: 2847

Answers (2)

tao
tao

Reputation: 90277

There are neither key or keyCode properties on an input event. If you want to listen to specific keyboard events, use the dedicated listeners.

input is designed to get all events modifying form elements values under one umbrella, to provide means of detecting subtle changes, like the ones which are performed while a slider is dragged without being released or while the value changes repeatedly when you're holding down the up/down arrow on a type="number" input.

Your best match is the event.data property (or you can get particular properties of event.target). But really, if you want to detect the press of a particular key, use keydown.

Current official recommendation for Input event.

Upvotes: 2

Mario Rogulj
Mario Rogulj

Reputation: 56

maybe this is where you can find answer, sounds to me like it should be it https://forum.vuejs.org/t/get-value-from-input/15854

I hope it helps.

Upvotes: 2

Related Questions