Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Keyboard Events
3.
Keydown and Keyup
3.1.
Auto-Repeat
4.
Handling keyboard Events
5.
Frequently Asked Questions
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

Keyboard Events, Keydown and Keyup

Introduction

Each KeyboardEvent object records a single interaction between the user and a key (or combination of a key and modifier keys) on the keyboard. The type of keyboard activity (keydown, keypress, or keyup) is identified by the event type.

At a base level, KeyboardEvent events report what interaction the user has with a key on the keyboard without providing any context for that interaction. Use the input event instead of the text event when dealing with text input. If the user enters text using a different method, such as a handwriting system on a tablet or a graphics tablet, keyboard events may not be fired.

In this blog, we will learn about Keyboard, Keydown and Keyup Events in detail. So without any further ado, let's get started! 

Also Read, Javascript hasOwnProperty

Keyboard Events

The keyboard events are fired when you interact with the keyboard. The following are the three most essential keyboard events:

  • keydown- When you press a key on the keyboard, keydown fires, and it fires again as you hold the key down.
  • keyup- When you release a key on the keyboard, keyup fires.
  • keypress- When you press a character keyboard key like a,b, or c, rather than the left arrow key, home, or end keyboard, keypress fires. While holding down the key on the keyboard, the keypress fires repeatedly.
     

Although keyboard events usually are fired on the text box, they are supported by all elements. The keyboard events are fired in the following order when you hit a character key once on the keyboard:

  1. keydown
  2. keypress
  3. keyup 
     

The keydown and keypress events are fired before any changes to the text box are made, whereas the keyup event is fired after the changes are made. When you press and hold a character key, the keydown and keypress events are repeated until the key is released.

The keydown event is triggered first when you press a non-character key, followed by the keyup event. When you press and hold the non-character key, the keydown is repeated until you let go of the key.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Keydown and Keyup

When a user hits a key on a running form while it or one of its controls has the focus, the KeyDown event is triggered. The KeyDown and KeyPress events alternate until the user releases the key, at which point the KeyUp event occurs. All keystrokes are sent to the form or control that has the focus. A form can only have the focus if it has no controls or if all of the visible controls are disabled.

These events also happen if you use the SendKeys action in a macro or the SendKeys statement in Visual Basic to send a keystroke to a form or control.

The KeyDown and KeyUp events are commonly used to distinguish or recognise:

  • Function keys.
  • Standard keyboard modifiers and key combinations (SHIFT, CTRL, or ALT).
  • The numeric keypad and the number buttons on the keyboard.


When you push or send an ANSI key, the KeyDown and KeyPress events occur. After an event for control caused by pressing or sending the key, the KeyUp event happens. When a keystroke shifts the focus from one control to another, the KeyDown event is triggered for the first control, while the KeyPress and KeyUp events are triggered for the second control.

A code is offered by the keydown and keyup events that identifies which key has been pressed, whereas the keypress event tells which character has been input. A lowercase "a," for example, will be reported as 65 by keydown and keyup but 97 by keypress. In all cases, an uppercase "A" is recorded as 65.

Souce: o7planning

Auto-Repeat

When a key is pushed long enough, it begins to "auto-repeat": the keydown triggers repeatedly, and when the key is released, we receive keyup. So having a lot of keydown and only one keyup isn't unusual.

The event object has the event.repeat property set to true for events generated by auto-repeat.

Handling keyboard Events

Follow these steps to handle a keyboard event:

  • First, choose the element that will be the target of the keyboard event. It's usually a text box.
  • To register an event handler, use element.addEventListener().


Assume you have the following text box with the following id message:

<input type="text" id="message">

The steps to register keyboard event listeners are as follows:

let msg = document.getDocumentById('#message');

msg.addEventListener("keydown", (event) => {
    // handle keydown
});

msg.addEventListener("keypress", (event) => {
    // handle keypress
});

msg.addEventListener("keyup", (event) => {
    // handle keyup
});


All three event handlers will be invoked whenever you press a character key. Practice it by yourself with the help of an online javascript editor.

Frequently Asked Questions

  1. When does the keydown event fire?
    When we press a key on the keyboard, keydown fires, and it fires again as we hold the key down.
     
  2. What happens if we press and hold a character key?
    When we press and hold a character key, the keydown and keypress events are repeated until the key is released.
     
  3. What is auto-repeat?
    When a key is pushed long enough, it begins to "auto-repeat", and the keydown triggers again and again, and when the key is released, we receive keyup.

Conclusion

In this article, we have extensively discussed keyboard events, keydown and keyup and their handling. 

We hope that this blog has helped you enhance your knowledge regarding keyboard events.  You can read our blog on the topic Mouse Events- Mouseover/out/enter. If you want to learn more, check out our articles on Code studio.

Do upvote our blog to help other ninjas grow.

Happy Coding!

Previous article
Pointer Events and Scrolling
Next article
Pipe Function in JavaScript
Live masterclass