格 千格 KiloCell

JS KeyCode Query

Real time detection of keyboard event properties (key, code, keycode)

-
Press any key on the keyboard

Listening keyboard input...

event.key -
event.code -
event.which -
event.location -
JavaScript Snippets 
window.addEventListener("keydown", (e) => {
  if (e.key === "-") {
    // LogicalProcessing
  }
});

JS KeyCode Guide: In-depth understanding of keyboard event properties

In Web In development, processing keyboard interactions is key to enhancing user experience. Developers need to capture key information with precision, whether they achieve shortcuts, game controls, or custom input behaviour. But with, uh, The evolution of Web standards, keyCode This once-mainstreamed attribute has gradually been abandoned. This tool is designed to help developers view modern and traditional key properties in real time and to provide standard code references.

Key, code and keycode

  • (Recommended): Returns the character value that comes from the key. For example, press Shift + a I'll be back. "A" 。 It is the preferred option for processing text input.
  • (Recommended): Returns the physical position of the key. For example, on the left. Shift And right. Shift The corresponding code is "ShiftLeft" and "ShiftRight" 。 It's the first option to process shortcuts and game control.
  • I'm sorry, I'm sorry, but I'm sorry, but I'm sorry, but I'm sorry. Returns the number code of the key. W3C due to poor compatibility and intuitiveness of the cross browser It has been marked as obsolete and is not recommended for use in new projects.

Best practices in the monitoring of keyboard events

Modern Web development should give priority to listening keydown event, and use event.key Make a logical judgement. If your application needs to distinguish physical position (e. g. game WASD key), it should be used event.code 。 The code segment below this tool automatically generates the corresponding listening template based on the key you press, which you can copy directly.

3. Common special key description

  • Meta key: On Windows. Windows Key, on Mac Command key.
  • Localization Properties: 0 The government is not a party to the law. 1 The first is the one on the left. 2 On the right side, 3 represents the digital keyboard area.
  • Combination key detection: Pass. e.ctrlKey , e.shiftKey , e.altKey , e.metaKey Boolean values determine whether the qualifying key is pressed.

4. How to use this tool to debug

If you find a key that does not respond to your application or that is not consistent under different operating systems, open this page and press the key. You can compare it immediately. key and code value, check if there is a logical error of compatibility. For example, some multimedia keys or international keyboards keyCode Often unreliable.

Common issues (FAQ)

Q: Why can't some system shortcuts (e.g. Ctrl+W) be shown?
A: Browser will prioritize certain dangerous system-level shortcuts to ensure user safety. These events are usually not available on the website. Catch or stop.

Q: Does the moving keyboard support these attributes?
A: The behaviour of the disk keyboard is completely different from that of the physical keyboard. On the moving side, suggest listening input Events or specific text processes logic, rather than relying on keyboard event properties.

Copyed to clipboard