Article Categories

Selected Reading

How to trigger a button click on keyboard "enter" with JavaScript?

Javascript Web Development Front End Technology

To trigger a button click when the user presses the "Enter" key, you can use JavaScript's event listeners to detect the keypress and programmatically trigger the button's click event.

Basic Example

Here's a complete example that triggers a button click when Enter is pressed inside an input field:

<!DOCTYPE html>
<html>
<head>
    <title>Trigger Button Click on Enter</title>
</head>
<body>
    <h1>Trigger Button Click on Enter Example</h1>
    
    <input id="inputField" placeholder="Type something and press Enter..." />
    <button id="alertBtn" onclick="alert('Button has been clicked!')">
        Click Me
    </button>
    
    <p>Press the "Enter" key inside the input field to trigger the button.</p>
    
    <script>
        var inputText = document.getElementById("inputField");
        inputText.addEventListener("keyup", function(event) {
            if (event.keyCode === 13) {
                event.preventDefault();
                document.getElementById("alertBtn").click();
            }
        });
    </script>
</body>
</html>

Modern Approach Using event.key

The keyCode property is deprecated. Use event.key for modern browsers:

<!DOCTYPE html>
<html>
<body>
    <input id="modernInput" placeholder="Modern approach - press Enter" />
    <button id="modernBtn">Modern Button</button>
    
    <script>
        document.getElementById("modernInput").addEventListener("keyup", function(event) {
            if (event.key === "Enter") {
                event.preventDefault();
                document.getElementById("modernBtn").click();
                console.log("Button clicked via Enter key!");
            }
        });
        
        document.getElementById("modernBtn").addEventListener("click", function() {
            console.log("Button was clicked!");
        });
    </script>
</body>
</html>

Using keydown vs keyup

You can use either keydown or keyup events. keydown triggers immediately when the key is pressed:

<script>
    document.getElementById("inputField").addEventListener("keydown", function(event) {
        if (event.key === "Enter") {
            event.preventDefault();
            document.getElementById("alertBtn").click();
        }
    });
</script>

Multiple Input Fields

For multiple input fields that should trigger the same button:

<!DOCTYPE html>
<html>
<body>
    <input class="trigger-input" placeholder="First input" />
    <input class="trigger-input" placeholder="Second input" />
    <button id="sharedBtn">Shared Button</button>
    
    <script>
        var inputs = document.querySelectorAll(".trigger-input");
        
        inputs.forEach(function(input) {
            input.addEventListener("keyup", function(event) {
                if (event.key === "Enter") {
                    event.preventDefault();
                    document.getElementById("sharedBtn").click();
                }
            });
        });
        
        document.getElementById("sharedBtn").addEventListener("click", function() {
            console.log("Shared button clicked!");
        });
    </script>
</body>
</html>

Key Points

Use event.key === "Enter" instead of deprecated event.keyCode === 13
event.preventDefault() prevents default form submission behavior
element.click() programmatically triggers the button's click event
Both keydown and keyup events work, with keydown being more responsive

Comparison

Method	Browser Support	Recommended
`event.keyCode === 13`	All browsers	No (deprecated)
`event.key === "Enter"`	Modern browsers	Yes

Conclusion

Use event.key === "Enter" with event listeners to trigger button clicks on Enter keypress. This provides better user experience by allowing keyboard navigation in web forms.

AmitDiwan

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

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next