How to send TAB key in JavaScript? [SOLVED]


Written by - Olorunfemi Akinlua
Reviewed by - Deepak Prasad

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.

 

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Ā®

 

Views: 27

Olorunfemi Akinlua

He is boasting over five years of experience in JavaScript, specializing in technical content writing and UX design. With a keen focus on programming languages, he crafts compelling content and designs user-friendly interfaces to enhance digital experiences across various domains. You can connect with him on LinkedIn.

Can't find what you're searching for? Let us assist you.

Enter your query below, and we'll provide instant results tailored to your needs.

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 send mail to admin@golinuxcloud.com

Thank You for your support!!

Leave a Comment