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 code Property
The KeyboardEvent code property in HTML DOM returns a string representing the physical key that was pressed during a keyboard event. Unlike the key property which returns the logical key value, the code property represents the actual physical key location on the keyboard, making it useful for game controls and applications that need to detect specific key positions regardless of keyboard layout.
Note − The code property is layout-independent, while the key property reflects the actual character typed. Use key for text input and code for physical key detection.
Syntax
Following is the syntax for accessing the KeyboardEvent code property −
event.code
This property returns a string value representing the physical key code (e.g., "KeyA", "Digit1", "Space", "Enter").
Return Value
The code property returns a string that identifies the physical key pressed. Common return values include −
Letter keys − "KeyA", "KeyB", "KeyC", etc.
Digit keys − "Digit0", "Digit1", "Digit2", etc.
Special keys − "Space", "Enter", "Backspace", "Tab"
Arrow keys − "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"
Function keys − "F1", "F2", "F3", etc.
Example − Basic Key Code Detection
Following example demonstrates the KeyboardEvent code property with key press detection −
<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent code Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { text-align: center; margin: 20px; }
input { padding: 10px; font-size: 16px; border: 2px solid #ccc; }
.output { margin-top: 20px; padding: 15px; background-color: #f5f5f5; }
</style>
</head>
<body>
<div class="container">
<h2>KeyboardEvent Code Property Demo</h2>
<label>Press any key in this input field:</label>
<br><br>
<input type="text" id="keyInput" placeholder="Type here...">
<div class="output" id="result">Press a key to see its code...</div>
</div>
<script>
document.getElementById('keyInput').addEventListener('keydown', function(event) {
document.getElementById('result').innerHTML =
'Key pressed: <strong>' + event.key + '</strong><br>' +
'Code: <strong>' + event.code + '</strong><br>' +
'Key location: Physical key on keyboard';
});
</script>
</body>
</html>
When you press keys in the input field, it displays both the key value and code. For example, pressing 'A' shows Key: "A" and Code: "KeyA" −
Key pressed: A Code: KeyA Key location: Physical key on keyboard
Example − Key vs Code Comparison
Following example shows the difference between the key and code properties −
<!DOCTYPE html>
<html>
<head>
<title>Key vs Code Comparison</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.demo-area { text-align: center; margin: 20px; }
input { padding: 10px; font-size: 16px; width: 300px; }
table { margin: 20px auto; border-collapse: collapse; }
th, td { border: 1px solid #ccc; padding: 10px; text-align: center; }
th { background-color: #f0f0f0; }
</style>
</head>
<body>
<div class="demo-area">
<h2>Key vs Code Property Comparison</h2>
<input type="text" id="compareInput" placeholder="Try Shift+A, numbers, symbols...">
<table>
<thead>
<tr>
<th>Property</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>event.key</td>
<td id="keyValue">-</td>
<td>Logical key value</td>
</tr>
<tr>
<td>event.code</td>
<td id="codeValue">-</td>
<td>Physical key location</td>
</tr>
</tbody>
</table>
</div>
<script>
document.getElementById('compareInput').addEventListener('keydown', function(event) {
document.getElementById('keyValue').textContent = event.key;
document.getElementById('codeValue').textContent = event.code;
});
</script>
</body>
</html>
Try pressing Shift+A: key returns "A" (uppercase) while code returns "KeyA" (physical key position). For the number 1 key, key might return "!" (with Shift) while code always returns "Digit1".
Example − Game Control Usage
Following example demonstrates using the code property for game-like controls where physical key position matters −
<!DOCTYPE html>
<html>
<head>
<title>Game Control with Code Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; text-align: center; }
.game-area { width: 300px; height: 200px; border: 2px solid #333; margin: 20px auto; position: relative; background-color: #f9f9f9; }
.player { width: 20px; height: 20px; background-color: #ff6b6b; position: absolute; top: 90px; left: 140px; transition: all 0.1s; }
.instructions { margin: 10px; font-size: 14px; }
</style>
</head>
<body>
<h2>Simple Game Movement (WASD Keys)</h2>
<div class="instructions">
Click in the game area, then use W/A/S/D keys to move the red square
</div>
<div class="game-area" id="gameArea">
<div class="player" id="player"></div>
</div>
<div id="keyInfo">Press WASD keys to move</div>
<script>
let player = document.getElementById('player');
let gameArea = document.getElementById('gameArea');
let keyInfo = document.getElementById('keyInfo');
let playerX = 140, playerY = 90;
gameArea.addEventListener('keydown', function(event) {
keyInfo.textContent = 'Key Code: ' + event.code;
switch(event.code) {
case 'KeyW': // W key - move up
if (playerY > 0) playerY -= 10;
break;
case 'KeyS': // S key - move down
if (playerY < 180) playerY += 10;
break;
case 'KeyA': // A key - move left
if (playerX > 0) playerX -= 10;
break;
case 'KeyD': // D key - move right
if (playerX < 280) playerX += 10;
break;
}
player.style.left = playerX + 'px';
player.style.top = playerY + 'px';
event.preventDefault();
});
gameArea.focus();
</script>
</body>
</html>
This game uses event.code to detect WASD keys regardless of keyboard layout. The red square moves based on the physical key positions, making it work consistently across different keyboard layouts.
Common Key Codes
Following table shows common key codes returned by the code property −
| Key Type | Physical Key | Code Value |
|---|---|---|
| Letters | A, B, C | "KeyA", "KeyB", "KeyC" |
| Numbers | 0, 1, 2 | "Digit0", "Digit1", "Digit2" |
| Special | Space, Enter, Tab | "Space", "Enter", "Tab" |
| Arrows | Arrow Keys | "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight" |
| Modifiers | Shift, Ctrl, Alt | "ShiftLeft", "ControlLeft", "AltLeft" |
| Function | F1, F2, F12 | "F1", "F2", "F12" |
Browser Compatibility
The KeyboardEvent code property is supported in all modern browsers including Chrome 48+, Firefox 38+, Safari 10.1+, and Edge 79+. For older browsers, consider using event.which or event.keyCode as
143 Views
