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
Enter key press event in JavaScript?
The Enter key press event in JavaScript allows you to detect when users press the Enter key (keycode 13) and execute specific functions. This is commonly used for form submissions, search functionality, or triggering actions without clicking a button.
Basic Syntax
You can handle the Enter key using the onkeypress event handler:
onkeypress="yourFunctionName(event)"
The Enter key has a keycode of 13, which you can check using event.keyCode.
Method 1: Using onkeypress Attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enter Key Press Example</title>
</head>
<body>
<h2>Type something and press Enter:</h2>
<input id="enterDemo" type="text" placeholder="Press Enter after typing"
onkeypress="return enterKeyPressed(event)" />
<p id="output"></p>
<script>
function enterKeyPressed(event) {
if (event.keyCode == 13) {
const input = document.getElementById('enterDemo');
const output = document.getElementById('output');
output.innerHTML = `You entered: "${input.value}"`;
console.log("Enter key is pressed");
return true;
} else {
return false;
}
}
</script>
</body>
</html>
Method 2: Using addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enter Key with addEventListener</title>
</head>
<body>
<h2>Modern approach with addEventListener:</h2>
<input id="modernInput" type="text" placeholder="Press Enter here" />
<p id="result"></p>
<script>
const input = document.getElementById('modernInput');
const result = document.getElementById('result');
input.addEventListener('keypress', function(event) {
if (event.key === 'Enter' || event.keyCode === 13) {
result.innerHTML = `Enter pressed! Input: "${input.value}"`;
console.log("Enter key detected with addEventListener");
}
});
</script>
</body>
</html>
Method 3: Using keydown Event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enter Key with keydown</title>
</head>
<body>
<h2>Using keydown event:</h2>
<textarea id="textArea" placeholder="Type and press Enter"></textarea>
<p id="message"></p>
<script>
document.getElementById('textArea').addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault(); // Prevents new line in textarea
document.getElementById('message').innerHTML =
`Enter key pressed! Content: "${this.value}"`;
}
});
</script>
</body>
</html>
Comparison of Methods
| Method | Event Type | Modern Standard | Key Detection |
|---|---|---|---|
| onkeypress attribute | keypress | No | event.keyCode === 13 |
| addEventListener | keypress/keydown | Yes | event.key === 'Enter' |
| keydown event | keydown | Yes | event.key === 'Enter' |
Key Points
- Enter key has keycode 13
- Modern JavaScript prefers
event.key === 'Enter'over keycode -
addEventListeneris the recommended approach - Use
event.preventDefault()to stop default behavior -
keydownfires beforekeypressand catches more keys
Conclusion
The Enter key press event is essential for interactive web applications. Use addEventListener with event.key === 'Enter' for modern, maintainable code that responds to user input effectively.
Updated on: 2026-03-15T23:18:59+05:30
27K+ Views
Advertisements