Keyboard Events, Keydown and Keyup

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!