Skip to main content

Handling Keyboard Events in JavaScript: Key Codes and Event Types

· 5 min read
Skill Upwards

"Handling Keyboard Events in JavaScript: Key Codes and Event Types"

Introduction​

Keyboard events play a crucial role in creating interactive web applications. They allow users to interact with your web page using their keyboards, enhancing user experience and accessibility.

In this blog post, we'll explore how to handle keyboard events in JavaScript, understand key codes, and work with different event types.

Suggested Tutorials 📑:​

let's start exploring keyboard events in JavaScript.

What are Keyboard Events?​

Keyboard events are events that are triggered by keyboard input. They allow users to interact with your web page using their keyboards. Keyboard events are useful for creating interactive web applications. They enhance user experience and accessibility.

1. Basic Keyboard Event Handling​

To start, let's set up a simple HTML page and JavaScript code to handle keyboard events.

As an example:

<!DOCTYPE html>
<html>
<head>
  <title>Keyboard Events</title>
</head>
<body>
  <h1>Press a key to see the event details:</h1>
  <script src="script.js"></script>
</body>
</html>
// script.js
document.addEventListener('keydown', (event) => {
  console.log('Key pressed:', event.key);
});

In the above code:

  • We have a simple HTML page with a heading and a script tag.
  • The script tag contains a JavaScript file that handles keyboard events.
  • We use the addEventListener() method to listen for the keydown event on the document object.
  • When the keydown event is triggered, we log the key that was pressed to the console.

2. Understanding Key Codes​

When a key is pressed, the keydown event is triggered. The keydown event contains a key property that represents the key that was pressed. The key property returns a string value that represents the key that was pressed.

As an example:

document.addEventListener('keydown', (event) => {
  console.log('Key pressed:', event.key);
});

In the above code:

  • We use the key property to get the key that was pressed.
  • The key property returns a string value that represents the key that was pressed.

Suggested Tutorials 📑:​

3. Different Event Types​

There are three different keyboard events that you can listen for:

  • keydown - This event is triggered when a key is pressed.
  • keyup - This event is triggered when a key is released.
  • keypress - This event is triggered when a key is pressed and released.

As an example:

document.addEventListener('keydown', (event) => {
  console.log('Key pressed:', event.key);
});

document.addEventListener('keyup', (event) => {
  console.log('Key released:', event.key);
});

document.addEventListener('keypress', (event) => {
  console.log('Key pressed and released:', event.key);
});

In the above code:

  • We listen for the keydown, keyup, and keypress events.
  • When the keydown event is triggered, we log the key that was pressed to the console.
  • When the keyup event is triggered, we log the key that was released to the console.
  • When the keypress event is triggered, we log the key that was pressed and released to the console.

4. Modifiers and Special Keys​

Modifiers and special keys are keys that modify the behavior of other keys. They include the Shift, Ctrl, Alt, Tab, Caps Lock, Enter, Backspace, Delete, Insert, Home, End, Page Up, Page Down, Arrow Keys, Escape, F1 - F12, and Print Screen keys.

As an example:


document.addEventListener('keydown', (event) => {
  console.log('Key pressed:', event.key);
  console.log('Modifiers:', event.altKey, event.ctrlKey, event.shiftKey);
});

In the above code:

  • We use the altKey, ctrlKey, and shiftKey properties to check if the Alt, Ctrl, and Shift keys were pressed.
  • The altKey, ctrlKey, and shiftKey properties return a boolean value that represents whether or not the Alt, Ctrl, and Shift keys were pressed.

Suggested Tutorials 📑:​

Conclusion​

In this blog post, we explored how to handle keyboard events in JavaScript, understand key codes, and work with different event types. We also learned how to check if modifiers and special keys were pressed. Keyboard events play a crucial role in creating interactive web applications. They allow users to interact with your web page using their keyboards, enhancing user experience and accessibility.

We hope you found this blog post helpful.

Happy coding! 🎉