Form events when submitting with keyboard

Published 11 January 2018 category: notes

The other day I was building a form, and I was surprised how event firing works when you press ENTER on the keyboard.

When you’re on a form field in most browsers, pressing ENTER on the keyboard triggers the browser to submit the form. This is called implicit submission (thanks Tim). I suspected pressing ENTER would cause a submit event to be fired on the form, but it is more nuanced than that.

‘ENTER’ submits the form, even if it contains no submit button. If the form does contain one or more submit buttons:

In the above, “the submit button” is the first submit button that exists in your form, the HTML spec calls this the form’s default button.

What surprised me, is that functions that listen to the click event on your default button, run before the form’s submit event is fired. Running event.preventDefault() on the form’s submit event will not stop that click handler from running (thanks Matijs for helping me figure this out).

Comments & mentions (4)

Paul Grenier ᕕ( ᐛ )ᕗ likes this
geertmelotte likes this replied: “Form events when submitting with keyboard”…
Adrian Roselli replied: Submit-on-Enter stuff goes back to Netscape days, but I didn’t know event.preventDefault() does not stop click handler.…
Leave a comment
Posted a response to this?

This website uses Webmentions. You can manually notify me if you have posted a response, by entering the URL below.