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:
- If you want to get element by id, use ‘#idOfInputField’.
- ‘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. 🤓