Summary of Vue's monitoring of keyboard events

Key Modifiers

When listening for keyboard events, we often need to check for detailed keys. Vue allows you to add key modifiers to v-on when listening to keyboard events:

<!-- Call `vm.submit()` only if `key` is `Enter` -->
<input v-on:keyup.enter="submit">

You can simply convert any valid key name exposed by KeyboardEvent.key to kebab-case to use as a modifier.

<input v-on:keyup.page-down="onPageDown">

To support older browsers when necessary, Vue provides aliases for most common key codes:

• -enter
• - tab
• - delete (captures the "Delete" and "Backspace" keys)
• -esc
• - space
• - up
• - down
• -left
• - right

You can also customize key modifier aliases via the global config.keyCodes object:

// You can use `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

System modifier keys

The following modifiers can be used to implement a listener that triggers mouse or keyboard events only when the corresponding key is pressed.

• - .ctrl
• - .alt
• - .shift
• - .meta

Do something
Unlike key aliases, when modifier keys are used with the keyup event, a normal key must be pressed when the event is triggered. In other words: if you want keyup.ctrl to be triggered, you must release other keys while pressing ctrl; simply releasing ctrl will not trigger the event.

<!-- Press Alt + Release C to trigger -->
<input @keyup.alt.67="clear">
 
<!-- Triggered by pressing Alt + releasing any key-->
<input @keyup.alt="other"><!-- Triggered when pressing Ctrl + enter--><input @keydown.ctrl.13="submit">

For elementUI input, we need to add .native at the end, because elementUI encapsulates the input and native events do not work.

<input v-model="form.name" placeholder="nickname" @keyup.enter="submit">

<el-input v-model="form.name" placeholder="nickname" @keyup.enter.native="submit"></el-input>

.exact Modifier

The .exact modifier allows you to control which events are triggered by a precise combination of system modifiers.

<!-- This will fire even if Alt or Shift is pressed together -->
<button v-on:click.ctrl="onClick">A</button>

<!-- Triggered only when Ctrl is pressed-->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- Triggered only when no system modifier is pressed-->
<button v-on:click.exact="onClick">A</button>

Mouse Button Modifiers

• .left
• .right
• .middle
  

These modifiers restrict the handler function to respond only to specific mouse buttons.

System key combinations

If we want to monitor the global key operation method, obviously, it is not possible to bind it to the page element.

We can monitor in mounted:

mounted() {
  document.onkeydown = function (event) {
    let key = window.event.keyCode;
    if (key === 65 && event.ctrlKey) { 
      // Listen for the ctrl+A key combination window.event.preventDefault(); // Turn off the browser's default shortcut key console.log('crtl+ a key combination')    
    } else if(key === 83 && event.ctrlKey) {       
      window.event.preventDefault(); //Close the browser shortcut key console.log('Save');
    }
  }
}

From the above examples, we can see that shift, control, and Alt can also be replaced by "window.event.shiftKey", "window.event.ctrlKey", and "window.event.altKey" in JS.

Appendix - Keyboard button keyCode table

The above is the detailed summary of Vue's monitoring of keyboard events. For more information about Vue's monitoring of keyboard events, please pay attention to other related articles on 123WORDPRESS.COM!