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 onkeypress Event Attribute
The HTML onkeypress event attribute is triggered when the user presses a key on the keyboard while focused on an element. This event is commonly used for input validation, real-time text processing, and creating interactive web forms.
Syntax
Following is the syntax for the onkeypress event attribute −
<tagname onkeypress="script">Content</tagname>
Where script is the JavaScript code to execute when a key is pressed.
Parameters
The onkeypress event attribute accepts the following parameter −
script − JavaScript code or function to execute when the keypress event is triggered.
Event Object Properties
When the onkeypress event fires, it creates an event object with useful properties −
event.key − Returns the value of the key pressed
event.keyCode − Returns the ASCII code of the pressed key (deprecated but still supported)
event.charCode − Returns the character code of the pressed key
event.which − Returns the key code (legacy property)
Basic Text Input Example
Following example demonstrates the onkeypress event with a text area −
<!DOCTYPE html>
<html>
<head>
<title>HTML onkeypress Event Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.show {
font-size: 1.2rem;
margin-top: 10px;
color: #333;
}
textarea {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<h1>HTML onkeypress Event Demo</h1>
<textarea placeholder="Type something here..." rows="3" cols="40" onkeypress="showText()"></textarea>
<div class="show">Start typing to see the text appear here...</div>
<script>
function showText() {
var textArea = document.querySelector("textarea");
var display = document.querySelector(".show");
display.innerHTML = 'Current text: ' + textArea.value;
}
</script>
</body>
</html>
The output displays the current text as you type −
HTML onkeypress Event Demo [Text area with placeholder text] Current text: [Shows typed content in real-time]
Key Detection Example
Following example shows how to detect specific keys pressed using the onkeypress event −
<!DOCTYPE html>
<html>
<head>
<title>Key Detection with onkeypress</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.key-info {
margin: 10px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Press Any Key to See Details</h2>
<input type="text" placeholder="Click here and press keys" onkeypress="detectKey(event)" style="padding: 10px; width: 300px;">
<div class="key-info" id="keyInfo">Key details will appear here...</div>
<script>
function detectKey(event) {
var keyInfo = document.getElementById('keyInfo');
keyInfo.innerHTML =
'Key pressed: ' + event.key + '<br>' +
'Key code: ' + event.keyCode + '<br>' +
'Character code: ' + (event.charCode || 'N/A');
}
</script>
</body>
</html>
This example displays detailed information about each key pressed −
Press Any Key to See Details [Input field] Key pressed: a Key code: 97 Character code: 97
Input Validation Example
Following example demonstrates using onkeypress for input validation to allow only numeric input −
<!DOCTYPE html>
<html>
<head>
<title>Numeric Input Validation</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.input-group {
margin: 15px 0;
}
input {
padding: 8px;
margin: 5px;
}
.message {
color: red;
font-size: 0.9rem;
}
</style>
</head>
<body>
<h2>Numeric Input Only</h2>
<div class="input-group">
<label>Enter numbers only: </label>
<input type="text" onkeypress="return isNumeric(event)" placeholder="123456">
</div>
<div class="message">Only numeric characters (0-9) are allowed</div>
<script>
function isNumeric(event) {
var keyCode = event.keyCode || event.which;
// Allow numbers (48-57), backspace (8), and enter (13)
if ((keyCode >= 48 && keyCode <= 57) || keyCode === 8 || keyCode === 13) {
return true;
}
return false; // Block non-numeric keys
}
</script>
</body>
</html>
This validation prevents non-numeric characters from being entered into the input field.
onkeypress vs onkeydown vs onkeyup
The following table compares the three keyboard event attributes −
| Event | When It Fires | Character Keys | Special Keys |
|---|---|---|---|
| onkeydown | When key is pressed down | Yes | Yes (Arrow keys, Ctrl, Alt, etc.) |
| onkeypress | When character key produces a character | Yes | Limited (Enter, Space, etc.) |
| onkeyup | When key is released | Yes | Yes |
Browser Compatibility
The onkeypress event attribute is supported in all modern browsers. However, it is deprecated in favor of the more comprehensive onkeydown event for detecting all keys including special keys like arrows, function keys, and modifier keys.
Conclusion
The onkeypress event attribute provides a simple way to respond to keyboard input in HTML elements. It is ideal for character input validation and real-time text processing, though onkeydown is preferred for detecting all keyboard keys including special keys.
272 Views
