This content originally appeared on Hidde's blog and was authored by Hidde de Vries
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:
- pressing
ENTERresults in aclickevent on the submit button of the form - when the submit button is clicked, it submits the form, which triggers a
submitevent on the form
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).
This content originally appeared on Hidde's blog and was authored by Hidde de Vries
Hidde de Vries | Sciencx (2018-01-11T00:00:00+00:00) Form events when submitting with keyboard. Retrieved from https://www.scien.cx/2018/01/11/form-events-when-submitting-with-keyboard/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.