Keyboard Input Events Explained | JavaScript Basics

Today, we are looking at JavaScript keyboard input events! We have included text input fields where you can test out these events live. Let’s get started. 😎

1. The keydown Event

The ‘keydown’ event only fires when you press down a key. It won’t fire when the key is released. Test it below:

You typed:

This is accomplished by registering an event listener with the ‘keydown’ keyboard input event.

const inputField = document.querySelector('.classOfInputField');
inputField.addEventListener('keydown', (e) => {
  console.log(e.type);
});

Note:

1. If you want to get element by id, use ‘#idOfInputField’.
2. ‘e’ is an object containing information about the event that is passed to the anonymous callback arrow function.

More Details: MDN

Related: JavaScript Basics – Let and Const Explained

2. The keyup Event

The ‘keyup’ event only fires when you release a pressed key. It won’t fire when the key is pressed. Test it below:

You typed:

This is accomplished by registering an event listener with the ‘keyup’ keyboard input event.

const inputField = document.querySelector('.classOfInputField');
inputField.addEventListener('keyup', (e) => {
  console.log(e.type);
});

More Details: MDN

3. The keypress Event

The ‘keypress’ event is a generalized event which fires when a key is pressed. Test it below:

You typed:

This is accomplished by registering an event listener with the ‘keypress’ keyboard input event.

const inputField = document.querySelector('.classOfInputField');
inputField.addEventListener('keypress', (e) => {
  console.log(e.type);
});

Warning: The keypress event has been deprecated. It doesn’t work in all browsers. Use keydown instead.

Related: What is JavaScript Object Notation (JSON)?

4. The cut Event

The ‘cut’ event is fired when the keyboard shortcut for cut (ctrl+x) is pressed or text is cut by using the context menu. Test it below:

You cut:

This is accomplished by registering an event listener with the ‘cut’ event.

const inputField = document.querySelector('.classOfInputField');
inputField.addEventListener('cut', (e) => {
  const selection = document.getSelection();
  console.log(selection);
});

More Details: MDN

5. The copy Event

The ‘copy’ event is fired when the keyboard shortcut for copy (ctrl+c) is pressed or text is copied by using the context menu. Test it below:

You copied:

This is accomplished by registering an event listener with the ‘copy’ event.

const inputField = document.querySelector('.classOfInputField');
inputField.addEventListener('copy', (e) => {
  const selection = document.getSelection();
  console.log(selection);
});

More Details: MDN

Related: Generating Random Numbers in JavaScript

6. The paste Event

The ‘paste’ event is fired when the keyboard shortcut for paste (ctrl+v) is pressed or text is pasted by using the context menu. Test it below:

You pasted:

This is accomplished by registering an event listener with the ‘paste’ event.

const inputField = document.querySelector('.classOfInputField');
inputField.addEventListener('paste', (e) => {
  console.log(e.type);
  let pastedText = (event.clipboardData || window.clipboardData).getData('text');
  console.log(pastedText);
});

Note: We need to grab the pasted text from the clipboard since the clipboard text is pasted into the dom after the paste event fires.

More Details: MDN

7. The input Event

The input event fires when the value of an input, select or textarea element has been changed. Test it below:

You typed:

This is accomplished by registering an event listener with the ‘input’ event.

const inputField = document.querySelector('.classOfInputField');
inputField.addEventListener('input', (e) => {
  console.log(e.type);
});

More Details: MDN

That’s all folks! We will keep updating this article with more keyboard input events. Be sure to follow us on social media to get notified. 🤓