Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM KeyboardEvent altKey Property
The HTML DOM KeyboardEvent altKey property returns a boolean value indicating whether the ALT key was pressed when a keyboard event was triggered. This property is particularly useful for detecting keyboard shortcuts and modifier key combinations in web applications.
Syntax
Following is the syntax for accessing the altKey property −
event.altKey
Return Value
The altKey property returns a boolean value −
- true − If the ALT key was pressed when the event occurred
- false − If the ALT key was not pressed when the event occurred
Example − Basic altKey Detection
Following example demonstrates how to detect when the ALT key is pressed along with other keys −
<!DOCTYPE html>
<html>
<head>
<title>ALT Key Detection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>HTML KeyboardEvent altKey Property Demo</h2>
<input type="text" placeholder="Press any key (try with ALT)" onkeydown="checkAltKey(event)" style="padding: 10px; width: 300px; border: 2px solid #ccc; border-radius: 5px;">
<div id="result" style="margin-top: 20px; font-size: 18px; color: #333;"></div>
<script>
function checkAltKey(event) {
var message = "Key pressed: " + event.key;
if (event.altKey) {
message += " (with ALT key)";
document.getElementById("result").style.color = "red";
} else {
message += " (without ALT key)";
document.getElementById("result").style.color = "blue";
}
document.getElementById("result").innerHTML = message;
}
</script>
</body>
</html>
The output shows different colored messages based on whether the ALT key was pressed −
Key pressed: a (without ALT key) [blue text] Key pressed: s (with ALT key) [red text]
Example − Keyboard Shortcuts
Following example shows how to create keyboard shortcuts using the altKey property −
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Shortcuts with ALT Key</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Keyboard Shortcuts Demo</h2>
<p>Try these shortcuts:</p>
<ul>
<li><b>ALT + S</b> - Save action</li>
<li><b>ALT + N</b> - New action</li>
<li><b>ALT + H</b> - Help action</li>
</ul>
<textarea placeholder="Focus here and try the shortcuts..." style="width: 100%; height: 100px; padding: 10px; border: 1px solid #ddd;"></textarea>
<div id="action" style="margin-top: 15px; padding: 10px; background: #f0f0f0; border-radius: 5px;">Press a shortcut to see the action</div>
<script>
document.addEventListener('keydown', function(event) {
if (event.altKey) {
switch(event.key.toLowerCase()) {
case 's':
event.preventDefault();
document.getElementById("action").innerHTML = "? Save action triggered!";
document.getElementById("action").style.background = "#d4edda";
break;
case 'n':
event.preventDefault();
document.getElementById("action").innerHTML = "? New action triggered!";
document.getElementById("action").style.background = "#cce5ff";
break;
case 'h':
event.preventDefault();
document.getElementById("action").innerHTML = "? Help action triggered!";
document.getElementById("action").style.background = "#fff3cd";
break;
default:
document.getElementById("action").innerHTML = "ALT + " + event.key.toUpperCase() + " pressed (no action defined)";
document.getElementById("action").style.background = "#f8d7da";
}
}
});
</script>
</body>
</html>
This example demonstrates practical use of the altKey property for implementing keyboard shortcuts. The output shows different actions based on ALT key combinations.
Example − Multiple Modifier Keys
Following example shows how to detect multiple modifier keys including ALT, CTRL, and SHIFT −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Modifier Keys</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Modifier Keys Detection</h2>
<input type="text" placeholder="Press keys with modifiers (ALT, CTRL, SHIFT)" onkeydown="detectModifiers(event)" style="width: 100%; padding: 10px; border: 2px solid #007bff; border-radius: 5px;">
<div style="margin-top: 20px;">
<div id="modifiers" style="background: #e9ecef; padding: 15px; border-radius: 5px; margin-bottom: 10px;">Modifier keys status will appear here...</div>
<div id="keyInfo" style="background: #f8f9fa; padding: 10px; border-radius: 5px;">Key information will appear here...</div>
</div>
<script>
function detectModifiers(event) {
var modifiers = [];
if (event.altKey) modifiers.push("ALT");
if (event.ctrlKey) modifiers.push("CTRL");
if (event.shiftKey) modifiers.push("SHIFT");
var modifierText = modifiers.length > 0 ? modifiers.join(" + ") : "None";
var keyPressed = event.key === " " ? "Space" : event.key;
document.getElementById("modifiers").innerHTML =
"<strong>Modifier Keys:</strong> " + modifierText;
document.getElementById("keyInfo").innerHTML =
"<strong>Key Pressed:</strong> " + keyPressed +
"<br><strong>Full Combination:</strong> " +
(modifiers.length > 0 ? modifiers.join(" + ") + " + " : "") + keyPressed;
}
</script>
</body>
</html>
The output displays the current state of all modifier keys and shows the complete key combination −
Modifier Keys: ALT + CTRL Key Pressed: s Full Combination: ALT + CTRL + s
Key Points
- The
altKeyproperty is read-only and returns a boolean value. - It works with all keyboard events:
keydown,keyup, andkeypress. - Commonly used in combination with other properties like
ctrlKeyandshiftKeyfor complex shortcuts. - Use
event.preventDefault()to prevent default browser behavior for custom shortcuts. - The property is supported in all modern browsers and provides consistent behavior across platforms.
Conclusion
The KeyboardEvent altKey property is essential for creating interactive web applications with keyboard shortcuts and accessibility features. It returns a simple boolean value indicating ALT key state, making it easy to implement modifier-based functionality and enhance user experience through keyboard navigation.
153 Views
