SC 2.1.1 Keyboard, SC 3.2.2 On Input
+sufficient
+Web pages that use JavaScript keydown or keyup event handlers to trigger actions on interactive elements.
The objective of this technique is to ensure that keydown and keyup event handlers do not unintentionally trigger application actions during Input Method Editor (IME) composition.
An IME allows users to enter characters not directly available on their keyboard, such as Chinese, Japanese, and Korean characters. During composition, keys like Enter, Tab, and Escape are used to control the IME (for example, confirming a candidate character), but they also fire keydown events on the page. If an event handler does not account for this, it may incorrectly execute application actions — such as submitting a form — while the user is still composing. This can violate SC 2.1.1 (keyboard shortcuts collide with IME controls) and SC 3.2.2 (unexpected change of context from input intended solely for the IME).
The KeyboardEvent.isComposing property is true during IME composition. Checking this property at the start of a handler lets developers skip application logic while the user is composing. Some older versions of Safari have a bug where isComposing is false on the final confirmation keypress; additionally checking event.keyCode === 229 provides a reliable cross-browser guard.
Alternatively, for form submission specifically, using the submit event is inherently IME-safe because the browser only fires it after composition is complete.
keydown handler with isComposingIn this example, a keydown event listener is attached to a text input. The handler checks event.isComposing and the Safari-compatibility fallback event.keyCode === 229 before triggering form submission when Enter is pressed. This ensures that pressing Enter to confirm an IME candidate does not accidentally submit the form.
const inputElement = document.querySelector("input");
+
+inputElement.addEventListener("keydown", (event) => {
+ if (event.isComposing || event.keyCode === 229) return;
+ if (event.key === "Enter") submit();
+});submit event instead of keydownThe submit event on a form element is inherently IME-safe. The browser fires submit only after IME composition has ended, so this approach avoids the issue entirely for form submission scenarios.
const formElement = document.querySelector("form");
+
+formElement.addEventListener("submit", (event) => {
+ event.preventDefault();
+ submit();
+});For each keydown or keyup event handler that executes an action when a specific key (such as Enter, Tab, or Escape) is pressed on an input element: