Submit a form with keypress on submit button, does it trigger onclick?

Question

When giving the focus to the Submit button and then pressing SPACE in the following snippet, it "clicks" (with the keyboard) on th Submit button, and onclick="alert()" is triggered.

This works on Chrome and Firefox.

Question: is it a general truth (in all browsers, all platforms) that a SPACE keypress on a Submit input (that thas focus) triggers the onclick? If so, where is it documented?

<form>
<input type="submit" onclick="alert()" />
</form>

Please note that it's not the same question as Submit form with Enter key without submit button?.

In Firefox it doesn't work. If you want to eliminate this behavior, [this](https://stackoverflow.com/questions/7465006/differentiate-between-mouse-and-keyboard-triggering-onclick) could interest you — GalAbra, Jun 22 '18 at 14:54
@GalAbra no I don't want to eliminate it, it's the contrary, I want to be sure it's true on all browsers ;) — Basj, Jun 22 '18 at 15:06
@GalAbra: it does work on Firefox, you have to give the focus to the button first (either with TAB or by clicking down on the button, moving the mouse out of the button, release the button). — Basj, Jun 22 '18 at 15:10
No, it's not true in all cases, and neither should it be. The click event can only 100% be relied upon when you click it. If you want to 100% handle space (or enter) then you should also handle key events. — Reinstate Monica Cellio, Jun 22 '18 at 15:51
@Archer do you think https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus is not considered as a standard? (see beginning of first paragraph) — Basj, Jun 22 '18 at 16:01
@Basj Microsoft don't think so, so I have to say no (sadly). — Reinstate Monica Cellio, Jun 22 '18 at 16:48
You're right @Archer. Do you think it's true at least for IE > 10 ? — Basj, Jun 22 '18 at 16:49
@Basj Honestly I do not know as I've given up with MS internet "applications" a long time ago. Sadly, my current contract does use it and I've fallen foul quite a few times using ES6 features and then having to revisit the code later. As of July onwards I'll be exclusively using IE at work, so I'd know for sure after that. It sucks, but it is what it is! — Reinstate Monica Cellio, Jun 22 '18 at 16:51

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

For native HTML elements, the button's onclick event will fire both for mouse clicks and when pressing Space or Enter, while the button has focus.

Here's a MDN link for reference

Buttons can be operated by both mouse users as well as keyboard users. For native HTML elements, the button's onclick event will fire both for mouse clicks and when pressing Space or Enter, while the button has focus.

score 0 · Answer 2 · answered Jun 22 '18 at 15:47

Maybe what you are actually looking for

Register onsubmit of form, no matter by which element.

var i = 0;
document.getElementById('myForm').onsubmit = function(e) {
  console.clear();
  console.log( "Sending! " + ++i );
  
  // do not actually send (just for demonstration puposes)
  e.preventDefault();
  return false;
}

<form id="myForm" action='#'>
  <input type="text"> Hit Enter on me!<br/>
  <input type="submit" value="Hit me with spacebar">
</form>

Submit a form with keypress on submit button, does it trigger onclick?

2 Answers2