Key modifier

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

<! Call 'vm.submit()' only if 'key' is' Enter '--> <input V-on :keyup. Enter ="submit">Copy the code

You can directly convert any valid keyname exposed by keyboardevent. key to kebab-case as a modifier.

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

To support older browsers if necessary, Vue provides aliases for most commonly used keycodes:

  • – enter 
  • – tab 
  • -delete (capture “delete” and “backspace” keys)
  • – esc 
  • – space 
  • – up 
  • – down 
  • – left 
  • – right

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

// You can use 'V-on :keyup.f1' vue.config.keycodes.f1 = 112Copy the code

System modifier key

You can use the following modifier to implement a listener that fires a mouse or keyboard event only when the corresponding key is pressed.

  • – .ctrl 

  • – .alt 

  • – .shift 

  • – .meta

    Do something

Unlike key aliases, modifier keys are used with keyUp events, and the event must be raised with a normal key pressed. To put it another way: to raise keyup. CTRL, you must press CTRL to release other keys; Releasing CTRL alone does not raise an event.

<! - by pressing Alt + C release trigger - > < input @ keyup. Alt. 67 = "clear" > <! -- Press Alt + to release any key trigger --> < input_keyup. Alt ="other"><! <input @keydown.ctrl.13="submit">Copy the code

For the input of elementUI, we need to add. Native, because elementUI encapsulates the input, and native events don’t work.

<input v-model="form.name" placeholder=" placeholder "@keyup. Enter ="submit"> <el-input v-model="form.name" placeholder=" placeholder" @keyup.enter.native="submit"></el-input>Copy the code

The exact modifier

The. Exact modifier allows you to control events triggered by the exact combination of system modifiers.

<! <button v-on:click. CTRL ="onClick">A</button> <! <button V-on :click.ctrl.exact="onCtrlClick">A</button> <! <button V-on :click.exact="onClick"> </button>Copy the code

Mouse button modifier

  • .left 
  • .right 
  • .middle

These modifiers restrict the handler to responding only to a particular mouse button.

System key combination

If we want to listen for global keystroke methods, obviously binding them to page elements is not going to work.

Mounted allows us to listen in:

mounted() { document.onkeydown = function (event) { let key = window.event.keyCode; If (key = = = 65 && event. CtrlKey) {/ / listening CTRL + A key combination window. The event. The preventDefault (); / / close the browser default shortcuts. The console log (' CRTL + a key combination)} else if (key = = = 83 && event. CtrlKey) {window. The event. The preventDefault (); // Close the browser shortcut console.log(' save '); }}}Copy the code

As can be seen from the above example, shift, Control, and Alt can also be replaced with “window.event.shiftKey”, “window.event.ctrlKey”, and “window.event.altKey” in JS.

Appendix – Keyboard button keyCode table