Trigger a button click with JavaScript on the Enter key in a text box

Legacy browser support and form behavior

The previous solution is concise, but it doesn't cater to all scenarios. If you need to support older browsers, opt for the equivalent keyCode:

document.querySelector('#textBox').addEventListener('keydown', function(e) {
  var key = e.which || e.keyCode; // Old browser? No problem!
  if (key === 13) { // 13 is Enter, not a baker’s dozen
    e.preventDefault(); // Stop! Hammer time.
    document.querySelector('#submitBtn').click();
  }
});


Here, the default Enter key action is prevented to avoid interference with the desired functionality. Encapsulate the trigger logic in a separate function for improved modularity.

Considerations for user experience

When tweaking keyboard actions, prioritize user experience. Avoid changing standard behaviors where possible and ensure users expecting a form submission via Enter are not disrupted. Test the behavior extensively for consistent performance across different browsers and devices.

Clean coding practices

Clean HTML eliminates JavaScript embedded deeply in markup:

<!-- HTML -->
<input id="textBox" type="text">
<button id="submitBtn" type="button">Submit</button> <!-- I’m just a button, standing in front of a form, asking it to trigger me. -->


Create clean and maintainable code structure with separation of concerns:

// JavaScript
function triggerButtonClick() {
  document.querySelector('#submitBtn').click();
}

// Adding listener
document.querySelector('#textBox').addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault(); // Keep form submission in check. Not today, Satan!
    triggerButtonClick();
  }
});


Common pitfalls to sidestep

Ensure your button is not of type 'submit' to avoid unexpected form submission caused by the default Enter key behavior. Contain the input elements outside of form tags or handle form submission pragmatically through JavaScript.

Code modularity and reusability

Consolidating related code into reusable blocks optimizes speed and simplifies debugging:

function onEnterPress(event) {
  if (event.key === 'Enter') { // If you’re the Enter key, raise your hand!
    triggerButtonClick();
  }
}

document.getElementById('textBox').addEventListener('keydown', onEnterPress); // I’m all ears!


Providing cross-browser support

It is quintessential to manage cross-browser inconsistencies to ensure equal user experience:

function handleEnterPress(event) {
  event = event || window.event; // Keeping older browsers in the game
  if (event.key === 'Enter' || event.keyCode === 13) { // Both the hipster way and the grandpa way! 
    // Custom functionality goes here
  }
}

document.querySelector('#textBox').addEventListener('keydown', handleEnterPress);


This caters to compatibility with various browser environments.

Handling advanced scenarios

For complex scenarios concerning dynamic DOM elements or single-page applications, consider using event delegation. Attach event listeners to parent elements and use event propagation:

document.querySelector('#parentElement').addEventListener('keydown', function(e) {
  if (e.target.matches('#textBox') && e.key === 'Enter') {
    triggerButtonClick(); // We got a Bingo!
  }
});
