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
Selected Reading
HTML DOM KeyboardEvent metaKey Property
The HTML DOM KeyboardEvent metaKey property returns a Boolean value indicating whether the meta key was pressed during a keyboard event. The meta key corresponds to the Cmd key on Mac and the Windows key on Windows systems.
This property is commonly used to detect keyboard shortcuts that involve the meta key, such as Cmd+C for copy on Mac or Windows+R for the Run dialog on Windows.
Syntax
Following is the syntax for accessing the metaKey property −
event.metaKey
Return Value
The metaKey property returns a Boolean value −
- true − If the meta key was pressed during the event
- false − If the meta key was not pressed during the event
Example − Detecting Meta Key Press
Following example demonstrates how to detect when the meta key is pressed along with other keys −
<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent metaKey Property</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
width: 70%;
margin: 0 auto;
text-align: center;
}
input[type="text"] {
padding: 8px;
margin: 10px;
width: 300px;
border: 2px solid #ddd;
border-radius: 5px;
}
.status {
padding: 15px;
margin: 10px;
background-color: #f0f0f0;
border-radius: 5px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Meta Key Detection</h2>
<p>Type in the text field and press the meta key (Cmd on Mac, Windows key on PC):</p>
<input type="text" id="textInput" placeholder="Press meta key while typing..." onkeydown="checkMetaKey(event)">
<div id="status" class="status">Meta key status will appear here...</div>
</div>
<script>
function checkMetaKey(event) {
var statusDiv = document.getElementById("status");
if (event.metaKey === true) {
statusDiv.textContent = "Meta key is pressed! Key: " + event.key;
statusDiv.style.backgroundColor = "#d4edda";
statusDiv.style.color = "#155724";
} else {
statusDiv.textContent = "Meta key is not pressed. Key: " + event.key;
statusDiv.style.backgroundColor = "#f8d7da";
statusDiv.style.color = "#721c24";
}
}
</script>
</body>
</html>
The output shows different messages and colors based on whether the meta key is pressed −
Meta key status will appear here... (Changes to green background when meta key is pressed, red when not pressed)
Example − Meta Key Shortcuts
Following example demonstrates detecting common meta key shortcuts −
<!DOCTYPE html>
<html>
<head>
<title>Meta Key Shortcuts</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.shortcut-area {
border: 2px solid #007bff;
padding: 20px;
margin: 20px;
border-radius: 8px;
background-color: #f8f9fa;
}
.shortcut-list {
text-align: left;
margin: 15px 0;
}
#output {
padding: 15px;
margin: 10px 0;
background-color: #e9ecef;
border-radius: 5px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="shortcut-area">
<h2>Meta Key Shortcuts Detector</h2>
<div class="shortcut-list">
<p><strong>Try these shortcuts:</strong></p>
<p>? Meta + C (Copy)</p>
<p>? Meta + V (Paste)</p>
<p>? Meta + S (Save)</p>
<p>? Meta + Z (Undo)</p>
</div>
<p><em>Press any key combination to test:</em></p>
<div id="output">Press a key combination...</div>
</div>
<script>
document.addEventListener('keydown', function(event) {
var output = document.getElementById('output');
var keyPressed = event.key.toLowerCase();
if (event.metaKey) {
var shortcutName = '';
switch(keyPressed) {
case 'c':
shortcutName = 'Copy';
break;
case 'v':
shortcutName = 'Paste';
break;
case 's':
shortcutName = 'Save';
event.preventDefault(); // Prevent browser save dialog
break;
case 'z':
shortcutName = 'Undo';
break;
default:
shortcutName = 'Unknown';
}
output.textContent = `Meta + ${event.key.toUpperCase()} pressed! (${shortcutName} shortcut)`;
output.style.backgroundColor = '#d1ecf1';
} else {
output.textContent = `Key pressed: ${event.key} (Meta key not pressed)`;
output.style.backgroundColor = '#f8d7da';
}
});
</script>
</body>
</html>
This example detects common shortcuts and displays the corresponding action name −
Meta Key Shortcuts Detector Try these shortcuts: ? Meta + C (Copy) ? Meta + V (Paste) ? Meta + S (Save) ? Meta + Z (Undo) Press a key combination... (Updates to show detected shortcuts like "Meta + C pressed! (Copy shortcut)")
Cross-Platform Considerations
The meta key behavior varies across different operating systems −
- macOS − The meta key refers to the Command (?) key
- Windows − The meta key refers to the Windows key
- Linux − The meta key is typically the Super key (often the Windows key)
Example − Multiple Modifier Keys
Following example shows how to detect the meta key in combination with other modifier keys −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Modifier Keys</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.key-detector {
border: 1px solid #ccc;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
background-color: #f9f9f9;
}
.modifier-status {
display: inline-block;
padding: 5px 10px;
margin: 5px;
border-radius: 3px;
font-weight: bold;
}
.active {
background-color: #28a745;
color: white;
}
.inactive {
background-color: #dc3545;
color: white;
}
</style>
</head>
<body>
<div class="key-detector">
<h2>Modifier Keys Status</h2>
<p>Press any combination of modifier keys:</p>
<div>
<span id="metaStatus" class="modifier-status inactive">Meta: OFF</span>
<span id="ctrlStatus" class="modifier-status inactive">Ctrl: OFF</span>
<span id="altStatus" class="modifier-status inactive">Alt: OFF</span>
<span id="shiftStatus" class="modifier-status inactive">Shift: OFF</span>
</div>
<p id="keyPressed">Last key pressed: None</p>
</div>
<script>
document.addEventListener('keydown', function(event) {
updateModifierStatus('metaStatus', event.metaKey, 'Meta');
updateModifierStatus('ctrlStatus', event.ctrlKey, 'Ctrl');
updateModifierStatus('altStatus', event.altKey, 'Alt');
updateModifierStatus('shiftStatus', event.shiftKey, 'Shift');
document.getElementById('keyPressed').textContent =
'Last key pressed: ' + event.key + ' (Code: ' + event.code + ')';
});
function updateModifierStatus(elementId, isPressed, keyName) {
var element = document.getElementById(elementId);
if (isPressed) {
element.textContent = keyName + ': ON';
element.className = 'modifier-status active';
} else {
element.textContent = keyName + ': OFF';
element.className = 'modifier-status inactive';
}
}
</script>
</body>
</html>
This example shows the status of all modifier keys simultaneously −
Modifier Keys Status Press any combination of modifier keys: Meta: OFF Ctrl: OFF Alt: OFF Shift: OFF Last key pressed: None (Status indicators turn green when keys are pressed)
Conclusion
The metaKey property is essential for detecting meta key combinations in web applications, enabling platform-specific keyboard shortcuts. It returns true when the Command key (Mac), Windows key (Windows), or Super key (Linux) is pressed during a keyboard event, making it valuable for creating cross-platform keyboard shortcuts.
Updated on: 2026-03-16T21:38:54+05:30
154 Views
Advertisements