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
What is onkeydown event in JavaScript?
The onkeydown event in JavaScript triggers when a user presses down a key on the keyboard. This event occurs before the key is released and before the character appears in the input field, making it useful for intercepting keystrokes and implementing custom keyboard behaviors.
Syntax
element.onkeydown = function(event) {
// Handle keydown event
};
// Or using addEventListener
element.addEventListener('keydown', function(event) {
// Handle keydown event
});
Basic Example
<!DOCTYPE html>
<html>
<head>
<title>Onkeydown Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<p id="output"></p>
<script>
function handleKeyDown() {
document.getElementById("output").innerHTML = "A key was pressed!";
}
document.getElementById("textInput").onkeydown = handleKeyDown;
</script>
</body>
</html>
Accessing Key Information
The event object provides useful information about the pressed key:
<!DOCTYPE html>
<html>
<head>
<title>Key Information Example</title>
</head>
<body>
<input type="text" id="keyInput" placeholder="Press any key...">
<div id="keyInfo"></div>
<script>
document.getElementById("keyInput").onkeydown = function(event) {
const info = `
Key: ${event.key}<br>
Key Code: ${event.keyCode}<br>
Which: ${event.which}<br>
Alt Key: ${event.altKey}<br>
Ctrl Key: ${event.ctrlKey}<br>
Shift Key: ${event.shiftKey}
`;
document.getElementById("keyInfo").innerHTML = info;
};
</script>
</body>
</html>
Preventing Default Behavior
You can prevent the default action of certain keys using preventDefault():
<!DOCTYPE html>
<html>
<head>
<title>Prevent Default Example</title>
</head>
<body>
<input type="text" id="restrictedInput" placeholder="Try typing numbers...">
<p>Numbers are blocked in this input field!</p>
<script>
document.getElementById("restrictedInput").onkeydown = function(event) {
// Block number keys (0-9)
if (event.keyCode >= 48 && event.keyCode <= 57) {
event.preventDefault();
console.log("Number key blocked!");
}
};
</script>
</body>
</html>
Common Use Cases
| Use Case | Description | Example Keys |
|---|---|---|
| Form Validation | Restrict input types | Block non-numeric keys |
| Keyboard Shortcuts | Implement custom shortcuts | Ctrl+S, Alt+F4 |
| Game Controls | Handle game movement | Arrow keys, WASD |
| Navigation | Custom navigation behavior | Tab, Enter, Escape |
Key Properties
- event.key - The actual key value (recommended)
- event.keyCode - Numeric key code (deprecated but widely supported)
- event.which - Cross-browser key code (deprecated)
- event.altKey, event.ctrlKey, event.shiftKey - Modifier key states
Browser Compatibility
The onkeydown event is supported in all modern browsers. For best practices, use event.key instead of the deprecated keyCode property when possible.
Conclusion
The onkeydown event is essential for creating interactive web applications with custom keyboard behavior. Use it for form validation, keyboard shortcuts, and preventing unwanted input before characters appear on screen.
448 Views
