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
How to create a JavaScript code for multiple keys pressed at once?
Use the keydown and keyup events in JavaScript to detect multiple keys pressed simultaneously. This technique tracks which keys are currently held down and updates the display accordingly.
Example: Multiple Key Detection
<!DOCTYPE html>
<html>
<head>
<title>Multiple Keys Detection</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.key-up { color: red; }
.key-down { color: green; }
ul { list-style-type: none; }
</style>
</head>
<body>
<h3>Press multiple keys to see them detected:</h3>
<ul id="log"></ul>
<script>
var log = $('#log')[0],
keyPressed = [];
$(document.body).keydown(function (evt) {
var li = keyPressed[evt.keyCode];
if (!li) {
li = log.appendChild(document.createElement('li'));
keyPressed[evt.keyCode] = li;
}
$(li).text('Key Down: ' + evt.keyCode + ' (' + evt.key + ')');
$(li).removeClass('key-up').addClass('key-down');
});
$(document.body).keyup(function (evt) {
var li = keyPressed[evt.keyCode];
if (li) {
$(li).text('Key Up: ' + evt.keyCode + ' (' + evt.key + ')');
$(li).removeClass('key-down').addClass('key-up');
}
});
</script>
</body>
</html>
How It Works
The code maintains a keyPressed array that stores DOM elements for each key. When a key is pressed down, it creates or updates a list item showing the key code. When released, it updates the display to show "Key Up" status.
Modern Vanilla JavaScript Approach
<!DOCTYPE html>
<html>
<head>
<title>Modern Multiple Keys Detection</title>
<style>
.active-keys { margin: 20px 0; }
.key {
display: inline-block;
padding: 5px 10px;
margin: 2px;
background: #007bff;
color: white;
border-radius: 3px;
}
</style>
</head>
<body>
<h3>Currently pressed keys:</h3>
<div id="activeKeys" class="active-keys"></div>
<script>
const activeKeys = new Set();
const display = document.getElementById('activeKeys');
function updateDisplay() {
display.innerHTML = Array.from(activeKeys)
.map(key => `<span class="key">${key}</span>`)
.join('') || 'No keys pressed';
}
document.addEventListener('keydown', function(evt) {
activeKeys.add(evt.key);
updateDisplay();
});
document.addEventListener('keyup', function(evt) {
activeKeys.delete(evt.key);
updateDisplay();
});
// Initial display
updateDisplay();
</script>
</body>
</html>
Key Features
- Real-time tracking: Shows currently pressed keys instantly
- Multiple key support: Can detect any number of simultaneous key presses
- Visual feedback: Different styling for active/inactive states
- Key names: Displays readable key names instead of just codes
Practical Use Cases
This technique is useful for:
- Game controls (move + jump combinations)
- Keyboard shortcuts (Ctrl+Shift+S)
- Accessibility features
- Text editor hotkeys
Conclusion
Multiple key detection requires tracking both keydown and keyup events. Use a Set or array to maintain the state of currently pressed keys for accurate detection.
Updated on: 2026-03-15T23:18:59+05:30
745 Views
Advertisements