Listen to keyboard events

problem

How to monitor keyboard copy, paste and delete?

accomplish

Monitor copy, paste and delete, compatible with windows and mac:

const onKeyDown = (e) => {
  const { metaKey, ctrlKey, key } = e
  const isCtrlOrCommand = ctrlKey || metaKey
  if (isCtrlOrCommand && key.toLocaleLowerCase() === 'c') {
    console.log('复制')
    return
  }
  if (isCtrlOrCommand && key.toLocaleLowerCase() === 'v') {
    console.log('粘贴')
    return
  }
  if (['Delete', 'Backspace'].includes(key)) {
    console.log('删除')
    return
  }
}

When the mouse is focused on other elements, no keyboard events are triggered:

const onKeyDown = (e) => {
  const { tagName } = document.activeElement || {}
  if (tagName && tagName.toLocaleUpperCase() !== 'BODY') {
    return
  }
  
  const { metaKey, ctrlKey, key } = e
  const isCtrlOrCommand = ctrlKey || metaKey
  if (isCtrlOrCommand && key.toLocaleLowerCase() === 'c') {
    console.log('复制')
    return
  }
  if (isCtrlOrCommand && key.toLocaleLowerCase() === 'v') {
    console.log('粘贴')
    return
  }
  if (['Delete', 'Backspace'].includes(key)) {
    console.log('删除')
    return
  }
}

What are the keyboard events?

There are three types of keyboard event monitoring operations: keydown, keypress, and keyup. The sequence of keyboard events triggered by pressing the keyboard is: keydown -> keypress -> keyup.

keydown
when the user presses any key on the keyboard 16197609e8c160, this event will be triggered repeatedly;

keypress
when the user presses the 16197609e8c191 character key on the keyboard, this event will be triggered repeatedly;

keyup
This event is triggered when the user releases the character key on the

the difference

• keypress: Can only capture a single character, can capture the case of a single character, does not distinguish between the numeric characters of the keypad and the main keyboard, and cannot monitor the function keys;
• keydown/keyup: can capture key combinations, can not distinguish between uppercase and lowercase letters, distinguish between small keyboard and main keyboard numeric characters;

KeyboardEvent

KeyboardEvent object describes the user's interaction with the keyboard. Each object describes a single interaction between the user and the keyboard (a combination of a key and modifier keys);

Common attributes

Attribute name	type	describe
altKey	Boolean	When the Alt key on Windows or the Option or ⌥ key on Mac is pressed, the value is true
metaKey	Boolean	When the Command key on Mac or the ⊞ key on Windows is pressed, the value is true
ctrlKey	Boolean	When the Ctrl key is pressed, the value is true
shiftKey	Boolean	When the Shift key is pressed, the value is true
code	String	Identifies which physical key is pressed, and each key on the keyboard corresponds to a unique value.
key	String	Specify the content of the specific input character. If it is a non-printing character (such as Enter, Esc, Shift, Alt, etc.), it will return the English name of the specific non-printing character. If the input is related to the input method, it will return to the fixed Process name.
keyCode	Number	[Obsolete attribute, not recommended] This value is to follow the keyboard, not the character content. The same key may have different keyCode, and the same character may have different keyCode.

The KeyboardEvent of mac pressing the command key is:

The KeyboardEvent of mac pressing the f key is: