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®
