Handle the Enter Key Accessibly in JavaScript Forms

Last updated: August 28, 2026.

Enter already has useful browser behavior. Intercept it only for a specific interface requirement, and never block it globally across every control.

Submit a search field deliberately

const form = document.querySelector('#search-form');
const input = form.querySelector('input[type=search]');

input.addEventListener('keydown', event => {
  if (event.key !== 'Enter' || event.isComposing) return;
  event.preventDefault();
  if (form.requestSubmit) form.requestSubmit();
});

Preserve expected keyboard behavior

• Do not block Enter in textareas.
• Use semantic button and form elements.
• Ignore composition events used by input methods.
• Test keyboard-only navigation and validation messages.

Reference: MDN KeyboardEvent key reference.