Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Detect the ENTER key in a text input field with JavaScript

Javascript Web Development Object Oriented Programming

Detecting the ENTER key in a text input field is a common requirement in web development. You can accomplish this using JavaScript event listeners and checking for the specific key code or key value.

HTML Setup

First, let's create a simple text input field:

<input type="text" id="txtInput" placeholder="Type and press Enter">

Method 1: Using keyCode (Legacy)

The traditional approach uses keyCode property with value 13 for the ENTER key:

<!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>
    <input type="text" id="txtInput" placeholder="Type and press Enter">
    
    <script>
        document.getElementById("txtInput").addEventListener('keyup', function(event) {
            if (event.keyCode === 13) {
                console.log("Enter key pressed using keyCode!");
                console.log("Input value: " + event.target.value);
            }
        });
    </script>
</body>
</html>

Method 2: Using key Property (Modern)

The modern approach uses the key property, which is more readable and recommended:

<!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</title>
</head>
<body>
    <input type="text" id="txtInput2" placeholder="Type and press Enter">
    
    <script>
        document.getElementById("txtInput2").addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                console.log("Enter key pressed using key property!");
                console.log("Input value: " + event.target.value);
                
                // Prevent default form submission if inside a form
                event.preventDefault();
            }
        });
    </script>
</body>
</html>

Method 3: Using jQuery

If you're using jQuery, you can achieve the same result with a more concise syntax:

<!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 - jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="txtInput3" placeholder="Type and press Enter">
    
    <script>
        $("#txtInput3").on('keyup', function(event) {
            if (event.key === 'Enter') {
                console.log("Enter key pressed with jQuery!");
                console.log("Input value: " + $(this).val());
            }
        });
    </script>
</body>
</html>

Comparison of Methods

Method Property Used Browser Support Recommended
Legacy keyCode === 13 All browsers No (deprecated)
Modern key === 'Enter' Modern browsers Yes
jQuery key === 'Enter' Depends on jQuery version If using jQuery

Key Points

  • Use keydown event to capture the key press immediately
  • Use keyup event to capture after the key is released
  • event.preventDefault() prevents default form submission behavior
  • The key property is more readable than keyCode

Conclusion

The modern approach using event.key === 'Enter' is recommended over the legacy keyCode === 13. Choose the method that best fits your project requirements and browser support needs.

Updated on: 2026-03-15T23:18:59+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements