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.

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);
});

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.

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);
});

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);
});

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.

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);
});

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. 🤓