Introduction
As a new JavaScript developer, you will often encounter errors in your work. One of the kinds of challenges you’ll face growing as a developer is how to handle keyboard events in JavaScript. In this tutorial, I will try my best to explain how keyboard events work in JavaScript. Let's get started if you're ready.
What is a Keyboard Event?:
When a user presses a key on the Keyboard, various events occur under the hood. They happen when input from the keyboard is received. These events describe the keyboard interaction with users. In other words, Keyboard Event simply indicates the user's interaction with a key on the keyboard at a low level, without providing any context for that interaction. For example, when dealing with text input, use the input event. If the user is using an alternative method of entering text, such as a handwriting system on a tablet or graphics tablet, keyboard events may not be fired. These events that occur when the user presses a key on the keyboard is what is known as the Keyboard Event Object.
Working with keyboard events in JavaScript.
Keyboard events in JavaScript as we know are used to detect the key that has been pressed. They are different kinds types of keyboard events namely: keydown, keypress, and keyup.
Keydown:
These are events triggered when a button on the keyboard has been pressed down.
Keypress:
These events are triggered when you press a key that represents a character such as a letter, a number, or a punctuation mark. It also tells a program what character the key represents.
Keyup:
These events are triggered when a button that has been pressed on the keyboard is released.
Keydown and keyup:
uses different codes to represent a letter, numbers, and other keys available on the keyboard. These events only tell a program what character or key has been pressed or released.
A key code is just a number that represents a key on the keyboard. A keycode returns to the button when a number has been pressed or released.
ASCII keycode returns ASCII codes and works with keypress events only.
ASCII.
stands for American Standard Code for Information Interchange. It's a 7-bit character code where every single bit represents a unique character.
If you are using keydown or keyup you use keycodes
If you are using keypress you use ASCII key code.
Let's take an example;
This is a program to check if the ‘a letter on the keyboard was pressed. If it is, it will display a little simple massage. The ‘a’ letter represents 65 in the ASCII table, you can find out by searching on google for keycodes. Letters and numbers have keycode numbers.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>keyboard Events</title>
</head>
<body>
<script>
window.addEventListener("keydown", checkkeyPress, false);
function checkkeyPress(key){
if(key.keyCode=="65"){
alert("the 'a' letter has been pressed!")
}
}
</script>
</body>
</html>
I added an event listener called checkkeypress(), what it does is to trigger an alert whenever the character ‘a’ is pressed on the keyboard. Again, it is worth mentioning that the ‘a’ represents ’65’ in the ASCII table. This is because computers don’t understand alphabetical characters.
View the code on the browser try hitting the b, c, f, g, h, etc nothing will happen. But when you hit the letter ‘a’ it gives you a message that the letter ‘a’ key has been pressed.
The example we above can also be implemented for keydown and keyup events.
!Note: By holding a button and pressing other keys nothing will happen until the button is released. Then it gives you a message. It’s triggered once the button has been released.
Conclusion
Finally, we have come to the completion of this tutorial and hopefully, you got value from it.
Thanks for reading, please hit the like, clap, or heart button to show some love, I will see you in the next tutorial…
We learned what keyboard events are, and how they work. We also covered the various JavaScript keyboard events such as keydown, keypress, and keyup.
If you have any question, please leave it on the comments. Like and share, and till next time, all the best!
About the Author
I am Jenifer Eze, an enthusiastic developer with passion for JavaScript, PHP, HTML & CSS.
I work as a freelancer, building websites for clients and love writing technical tutorials to teach others what I do. I am eager to hear from you. Reach me on LinkedIn, Github, or my website.
Top comments (1)
wow