How to detect Enter key in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Detecting the Enter key specifically is crucial for form submissions, search functionality, and creating intuitive user interfaces.
As the creator of CoreUI with over 25 years of web development experience, I’ve implemented Enter key detection in countless form components and interactive elements.
The most reliable and modern approach is checking for event.key === 'Enter' within a keydown event listener.
This method works consistently across all browsers and provides clear, readable code.
Check for event.key === 'Enter' within a keydown event listener to detect Enter key presses.
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
console.log('Enter key was pressed!')
// Your action here
}
})
This code listens for all keydown events and specifically checks if the pressed key is ‘Enter’. When the Enter key is detected, you can execute your desired action, such as submitting a form or triggering a search. The event.key property returns the string ‘Enter’ for the Enter key, making the condition easy to read and understand.
Best Practice Note:
This is the exact pattern we use in CoreUI form components for enhanced user experience.
Consider preventing the default behavior with event.preventDefault() if you’re handling the Enter key action yourself.
