Ctrl + Enter to submit Form (Typescript)

ctrl-enter.ts

document.body.addEventListener("keydown", (e: KeyboardEvent) => {
    if (!(e.key === "Enter" && (e.metaKey || e.ctrlKey))) return

    const form = (e.target as HTMLFormElement).form
    if (form) form.submit() // or form.requestSubmit() depending on your usecase
  })
 

Line # 4 is basically a check for the existence of the form element as the target of the event. The e.target.form will yield a form if any one of the inputs within the form is focused.

So pressing Ctrl+Enter with any input or button element being focused within the form will submit the form.

Unfortunately, the e.target as HTMLFormElement isn't the most precise coercion, because the .form receives the any type:

---

A bit more robust handling would look like this:

(event) => {
	if (!event.target) return;

	const { key, metaKey, ctrlKey } = event;
	if (key !== 'Enter' || !(metaKey || ctrlKey)) return;

	if ('form' in event.target) {
		const formElement = event.target.form as HTMLFormElement;
		formElement?.requestSubmit();
	}
}