-
-
Save Swatto/f5d082dead25dcafbfdc to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Why forms, Why!</title> | |
| </head> | |
| <body> | |
| <form> | |
| <input type="text" autofocus> | |
| <button>Button</button> | |
| </form> | |
| <script type="text/javascript"> | |
| // Prevent the page to change when the form is submited | |
| document.querySelector('form').addEventListener('submit', function(ev) { | |
| ev.preventDefault(); | |
| }); | |
| // Listen to click event on the button to display an alert | |
| document.querySelector('button').addEventListener('click', function(ev) { | |
| alert('button clicked'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
More information here: https://html.spec.whatwg.org/multipage/forms.html#implicit-submission
4.10.22.2 Implicit submission
A form element's default button is the first submit button in tree order whose form owner is that form element.
If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the >form), then doing so for a form whose default button has a defined activation behaviour must cause the user agent to run synthetic click activation steps on that default button.
Consequently, if the default button is disabled, the form is not submitted when such an implicit submission mechanism is used. (A button has no activation behaviour when >disabled.)
There are pages on the Web that are only usable if there is a way to implicitly submit forms, so user agents are strongly encouraged to support this.
If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the >form element from the form element itself otherwise.
For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element >and whose type attribute is in one of the following states: Text, Search, URL, Telephone, E-mail, Password, Date, Month, Week, Time, Local Date and Time, Number
I've had the same problem in the past. I always wondered why Chrome generates this click event without providing a "proper" way to differentiate this virtual click with a user click (at least none that I know of).
I like your solution :P. However, the solution is simpler (at least on Chrome).
The problem is that Chrome adds a [type="submit"] on the first
<button>it sees in a form (virtually because you can't see it when you inspect the element), if there is no<button>with that attribute.To prevent this from happening, you just have to add the attribute [type="button"], so that it's not overridden:
<button type="button">Button</button>At least on Chrome. I wonder if it works on Safari, etc. as well.
Edit: fixed formatting