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
Check whether Enter key is pressed or not and display the result in console with JavaScript?
In JavaScript, you can detect when the Enter key is pressed using the onkeypress event handler. This is useful for form submissions, search functionality, or triggering actions when users press Enter.
Key Code for Enter Key
The Enter key has a key code of 13. We can check this using the keyCode property of the event object.
Basic Implementation
First, create an input field with an onkeypress event handler:
<input id="textBox" type="text" onkeypress="return checkEnterKey(event)"/>
Then, create a function to detect the Enter key:
function checkEnterKey(event) {
if (event.keyCode == 13) {
var textBox = document.getElementById("textBox");
console.log("Value entered:", textBox.value);
console.log("Enter key is pressed");
return true;
} else {
console.log("Enter key is not pressed");
return false;
}
}
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enter Key Detection</title>
</head>
<body>
<h3>Type something and press Enter:</h3>
<input id="textBox" type="text" onkeypress="return checkEnterKey(event)" placeholder="Type here and press Enter"/>
<script>
function checkEnterKey(event) {
if (event.keyCode == 13) {
var textBox = document.getElementById("textBox");
console.log("Value entered:", textBox.value);
console.log("Enter key is pressed");
return true;
} else {
console.log("Enter key is not pressed");
return false;
}
}
</script>
</body>
</html>
Modern Approach Using addEventListener
For better practice, you can also use addEventListener instead of inline event handlers:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enter Key Detection - Modern Approach</title>
</head>
<body>
<h3>Modern approach with addEventListener:</h3>
<input id="modernTextBox" type="text" placeholder="Type here and press Enter"/>
<script>
document.getElementById('modernTextBox').addEventListener('keypress', function(event) {
if (event.keyCode === 13) {
console.log("Value entered:", this.value);
console.log("Enter key detected using addEventListener");
} else {
console.log("Key pressed:", event.key);
}
});
</script>
</body>
</html>
Expected Output
When you type text and press Enter, you'll see output in the browser console:
Enter key is not pressed Enter key is not pressed Value entered: Hello World Enter key is pressed
Key Points
- Enter key has keyCode
13 - Use
onkeypressoraddEventListenerto detect key events - Access the input value using
getElementById()and.value - Check the browser console to see the output messages
Conclusion
Detecting Enter key presses is straightforward using JavaScript's event handling. Use keyCode === 13 to identify the Enter key, and access the input value through DOM manipulation for complete functionality.
383 Views
