Vue Keyboard Event

Posted on  by admin

See demo first. Focus on the following textarea element and press arrow keyson your keyboard. You will see the keyCode of the arrow key pressed by you. The following is the source code for above demo. We use key modifiers[3] to listen to the keyup event of textarea element.When textarea element is focused and users press any arrow key, the keyCode ofthe arrow key will be shown in the textarea. There are four arrow keys on the keyboard. We need to define custom key aliasfor the arrow keys in the keyCodes in Vue.config.

The keyCodes of arrow keysare from 37~40, so we use array of numbers to define key alias. Note that the following syntax in Vue.config does not work:. The correct syntax is:. When users press arrow key in textarea element, the show method will beexecuted and the keyCode of the corresponding arrow key will be appended to thetextarea. You’re browsing the documentation for v2.x and earlier.

For v3.x, click here. We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered.

The button above has been clicked {{ counter }} times. The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the v-on attribute isn’t feasible.

That’s why v-on can also accept the name of a method you’d like to call. Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement:. Sometimes we also need to access the original DOM event in an inline statement handler.

You can pass it into a method using the special $event variable:. It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.

To address this problem, Vue provides event modifiers for v-on. Recall that modifiers are directive postfixes denoted by a dot. Order matters when using modifiers because the relevant code is generated in the same order.

Therefore using v-on:click.prevent.self will prevent all clicks while v-on:click.self.prevent will only prevent clicks on the element itself. Unlike the other modifiers, which are exclusive to native DOM events, the .once modifier can also be used on component events. If you haven’t read about components yet, don’t worry about this for now.

Vue also offers the .passive modifier, corresponding to addEventListener‘s passive option. The .passive modifier is especially useful for improving performance on mobile devices. Don’t use .passive and .prevent together, because .prevent will be ignored and your browser will probably show you a warning.

Remember, .passive communicates to the browser that you don’t want to prevent the event’s default behavior. When listening for keyboard events, we often need to check for specific keys.

Vue allows adding key modifiers for v-on when listening for key events:.