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 keyCode Property
The KeyboardEvent keyCode property returns the numeric unicode character code for the key that was pressed during a keyboard event. This property has been deprecated in favor of the key property, but it is still widely used in legacy code and remains functional across browsers.
Note − The keyCode property is deprecated. Use the key property instead for more accurate and readable results in modern applications.
Syntax
Following is the syntax for accessing the keyCode property −
event.keyCode
The event.keyCode returns a numeric value representing the key that was pressed. For example, the letter 'A' returns 65, 'a' returns 97, and the Enter key returns 13.
Common Key Codes
Following are some commonly used key codes −
| Key | Key Code | Description |
|---|---|---|
| Enter | 13 | Enter/Return key |
| Space | 32 | Space bar |
| A-Z | 65-90 | Uppercase letters |
| a-z | 97-122 | Lowercase letters |
| 0-9 | 48-57 | Number keys |
| Escape | 27 | Escape key |
Example − Basic KeyCode Detection
Following example demonstrates how to capture and display the key code of pressed keys −
<!DOCTYPE html>
<html>
<head>
<title>KeyCode Detection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Press Any Key to See Its Code</h2>
<input type="text" id="keyInput" placeholder="Click here and press any key" style="padding: 10px; font-size: 16px; width: 300px;">
<div id="result" style="margin-top: 20px; font-size: 18px; color: blue;"></div>
<script>
document.getElementById('keyInput').addEventListener('keydown', function(event) {
var keyPressed = event.keyCode;
var keyChar = String.fromCharCode(keyPressed);
document.getElementById('result').innerHTML =
'Key: ' + keyChar + ' | Key Code: ' + keyPressed;
});
</script>
</body>
</html>
The output displays the pressed key and its corresponding numeric code −
Press Any Key to See Its Code [Input field] Key: A | Key Code: 65 (when 'A' is pressed)
Example − Interactive Quiz Application
Following example creates a simple quiz where the user must press the correct key −
<!DOCTYPE html>
<html>
<head>
<title>KeyCode Quiz</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div style="text-align: center; max-width: 600px; margin: 0 auto;">
<h2>KeyCode Quiz</h2>
<p>Fill in the blank: <strong>M</strong> for Mango</p>
<input type="text" id="textInput" placeholder="Press the missing letter"
style="padding: 10px; font-size: 16px; width: 250px;" autocomplete="off">
<div id="feedback" style="margin-top: 15px; font-size: 18px; min-height: 25px;"></div>
</div>
<script>
document.getElementById('textInput').addEventListener('keypress', function(event) {
var feedback = document.getElementById('feedback');
if(event.keyCode === 109) { // 'm' key
feedback.innerHTML = '<span style="color: green;">Correct! M for Mango</span>';
} else {
feedback.innerHTML = '<span style="color: red;">Try again. Press "m" for Mango</span>';
}
this.value = ''; // Clear input
});
</script>
</body>
</html>
The application checks if the pressed key has a keyCode of 109 (lowercase 'm') and provides feedback accordingly −
KeyCode Quiz Fill in the blank: M for Mango [Input field: Press the missing letter] Correct! M for Mango (when 'm' is pressed) Try again. Press "m" for Mango (for other keys)
Example − Arrow Key Navigation
Following example demonstrates using keyCode to detect arrow key presses for navigation −
<!DOCTYPE html>
<html>
<head>
<title>Arrow Key Navigation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Arrow Key Navigation</h2>
<p>Click in the box below and use arrow keys to move</p>
<div style="position: relative; width: 400px; height: 300px; border: 2px solid #333; margin: 20px auto;">
<div id="movableBox" style="position: absolute; top: 140px; left: 190px; width: 20px; height: 20px; background: red; border-radius: 50%;"></div>
</div>
<div id="keyInfo" style="margin-top: 10px; font-size: 16px;">Use arrow keys to move the red circle</div>
<script>
var box = document.getElementById('movableBox');
var keyInfo = document.getElementById('keyInfo');
var top = 140, left = 190;
document.addEventListener('keydown', function(event) {
switch(event.keyCode) {
case 37: // Left arrow
left = Math.max(0, left - 10);
keyInfo.textContent = 'Left Arrow (Key Code: 37)';
break;
case 38: // Up arrow
top = Math.max(0, top - 10);
keyInfo.textContent = 'Up Arrow (Key Code: 38)';
break;
case 39: // Right arrow
left = Math.min(370, left + 10);
keyInfo.textContent = 'Right Arrow (Key Code: 39)';
break;
case 40: // Down arrow
top = Math.min(270, top + 10);
keyInfo.textContent = 'Down Arrow (Key Code: 40)';
break;
}
box.style.top = top + 'px';
box.style.left = left + 'px';
});
</script>
</body>
</html>
This creates a movable red circle that responds to arrow key presses. Each arrow key has a specific keyCode: left (37), up (38), right (39), and down (40).
KeyCode vs Key Property
The modern key property provides more readable values compared to numeric keyCodes −
| Property | Example Value | Description |
|---|---|---|
| keyCode | 65 | Numeric code (deprecated) |
| key | "A" | Human-readable string (modern) |
| keyCode | 13 | Numeric code for Enter |
| key | "Enter" | String name for Enter |
Browser Compatibility
The keyCode property is supported in all major browsers but is deprecated. For new projects, use the key property which provides better cross-platform consistency and more readable values.
Conclusion
The KeyboardEvent keyCode property returns numeric codes for pressed keys and is useful for keyboard event handling in web applications. However, since it is deprecated, developers should transition to using the more modern key property which provides human-readable string values instead of numeric codes.
129 Views
