Detailed explanation of Vue's keyboard events

In js, if we want to get the code of a key, we usually need to bind an event through (keydown/keyup), and then get the code through the keyCode attribute in the default parameter event. If we want to press a fixed key to trigger an event, we need to make constant judgments in the event, which will be very troublesome.

 var input = document.querySelector('input')
    input.onkeyup = function (e) {
        if (e.keyCode == 13)
            console.log('I am the Enter key')
    }

In vue, aliases are provided for some commonly used buttons, and we only need to add the corresponding alias after the event, without manually judging in the event.

Common key aliases

Vue has bound aliases to some commonly used buttons, which are as follows.

• Up arrow: up
• Down arrow: down
• Left arrow: left
• Right arrow: right
• Space: space
• Line break: tab
• Exit: esc
• Enter: enter
• Delete/Backspace:delete

Aliases can be used to restrict keyboard events (keydown, keyup). The bound event will only be executed when the key pressed is consistent with the alias.

 <input v-on:keyup.enter="showtip" type="text">
The showtip method is executed only when the enter key is pressed

In addition, the tab key is only suitable for use with keydown. In the browser, the tab itself is bound to an event: switch focus, so after pressing and releasing the tab key, the default event will be triggered, and the event bound to keyup will be ignored. Using keydown can avoid this situation, and the bound event will be executed at the moment the tab is pressed.

Key without alias provided

In addition, there is no alias for the button in vue, vue also provides us with a way to use it. Vue stipulates that for buttons that do not provide aliases, you can use the original key value of the button to bind. The so-called key value is the value obtained by event.key. like

 var input = document.querySelector('input')
    input.onkeyup = function (e) {
       console.log(e.key)
       }

The above code will output the corresponding key value in the console when we press any key. Pressing the uppercase and lowercase switch key, Q and W keys will get the following values

We can use the key value as an alias for the key. It should be noted that if the key value is a single letter or word, you can use the key value directly. However, if it is composed of multiple words, such as the uppercase and lowercase switch key, it is a combination of two words. At this time, you need to change the key value and use the hyphen naming rule to change CapsLock-->caps-lock.

 <input v-on:keyup.Q="showtip" type="text">
//The showtip method will only be executed when the q key is pressed <input v-on:keyup.caps-lock="showtips" type="text">
//The showtips method will only be executed when the capslock key is pressed

System modifier keys

The so-called system modifier keys are ctrl, alt, shift, etc. The use of these keys is a bit complicated, mainly divided into the following two situations

1. When the trigger event is keyup, you need to press other keys while pressing the modifier key, and then release the other keys for the event to be triggered.

 <input v-on:keyup.Alt="showtips" type="text">
//Press the alt key and then press any key, then release any key to execute the showtips method //The above steps are too troublesome. We can write it like this <input v-on:keyup.Alt.y="showtips" type="text">
//When you press alt y, the event will be triggered without having to press alt, then y, and then y

When the trigger event is keydown, press the modifier key directly.

 <input v-on:keydown.Alt="showtips" type="text">
//The showtips method will only be executed when the alt key is pressed

Custom key aliases

Vue provides us with a method to customize key aliases, which can be defined by (Vue.config.keyCodes.custom key name = key code)

 <input v-on:keydown.en="showtips" type="text">
//The showtips method will only be executed when the Enter key is pressed Vue.config.keyCodes.en=13
//13 is the key code of the Enter key, define its alias as en

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!