How to send TAB key in JavaScript? [SOLVED]

Introduction

Aside from the alphanumeric characters, different keys are used for numerous operations. Certain functions keys are used for help, documentation or running operations

In web development, the tab key is used to indent code, but what if you want to send the tab key itself? In this article, we'll show you how to send the tab key in JavaScript. We will show you how to detect and make use of the tab key presses in JavaScript and connect event listeners to the tab event.

Advertisement

 

Attach Event to the tab key in JavaScript

Aside from the typical behaviors and operations that are done with the tab keys such as moving through hyperlinks, webpage sections, and text boxes, we can attach custom events to the tab key. For us to attach an event listener to the tab key, we need to properly reference the tab key. To do this, we need the keyCode for the tab key which is the number 9. With that, we will compare the keyCode value we receive to the value 9, and perform the actions that we want.

Let’s log the links that the tab key is presently on, we will add an event listener with the keyup event and function listLinks. The listLinks function will check if the keyCode is equal to 9, access the ativeElement and console.log the href attribute.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
    </body>
    <script>
        document.addEventListener("keyup", listLinks);

        function listLinks(e) {
            if (e.keyCode == 9) {
                currentElement = document.activeElement;
                console.log(currentElement.href);
            }
        }
    </script>
</html>

Output (within the console)

<http://127.0.0.1:5500/index.html>
<http://127.0.0.1:5500/about.html>
<http://127.0.0.1:5500/contact.html>

 

Summary

We can make use of the keys on the keyboard to perform actions other than their default operations. As long as you know their keyCode value, we can make use of them with JavaScript event listeners. Inherently, we can make use of the tab key (with a keyCode value of 9) to perform event-based operations.

 

References

JavaScript Key Code for Tab | Toptal®

 

Didn't find what you were looking for? Perform a quick search across GoLinuxCloud

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can either use the comments section or contact me form.

Thank You for your support!!

Leave a Comment

X