![How to send TAB key in JavaScript? [SOLVED]](/javascript-send-tab-key/javascript-send-tab-key.jpg)
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.
