How do I differentiate between clicking a submit button and hitting enter in an input to submit a form?

Question

Specifically, I do NOT want to use the already-recommended method of event.preventDefault() when the enter key is pressed, because that breaks functionality for datalists in at least Internet Explorer.

I've tried something along the lines of

$("#form").submit(function(event){
    console.log(event);
    return false; // Allows me to read the console before the form submits!
});

To compare the differences between the events (clicking the submit button vs hitting the enter key), and there doesn't seem to be anything obvious. I would have expected the latter to have an event.keyCode , but that's not the case.

A long-winded workaround that I can think of seems to be to remove my submit button, and replace it with a regular button whose click is bound to submitting the form. But that way, I'll have to capture the enter key presses in inputs and deal with submitting the form from scratch. Ugly, but doable. Again, I do NOT want to apply any preventDefault() s if I can help it.

Answer 1

Kind of a hacky solution, but you can tie the event handler to a click on the submit button, instead of a submit of the #form . Then you can check if there were non-zero coordinates associated with the event. If so, the submit button was clicked, if not, the enter key was pressed. eg

$("input[type='submit']").click(function(event){
    if (event.screenX === 0) alert("You hit the enter key!");
    else alert("You clicked the submit button!");

    return false; // Allows me to read the console before the form submits!
});

Answer 2

You could use the mousedown event instead, which will not be triggered by pressing the enter key

$('input[type="submit"]').on('mousedown', function() {

});

Answer 3

Sorry to chime in so late, but I am working through similar issues. The above answers, excepting the one from @Clive are hacky and go against default browser behavior. While these kinds of hacks may work on some browsers, and for some users, there is a good chance they disrupt assistive technology like screenreaders. Spec exists for more than the visual representation of the DOM.

I am gathering that the question is here:

Specifically, I do NOT want to use the already-recommended method of event.preventDefault() when the enter key is pressed... ... To compare the differences between the events (clicking the submit button vs hitting the enter key), and there doesn't seem to be anything obvious...

Consider this:

<form>
  <input />
  <!-- This is best practice for accessibly hiding DOM elements for sighted users -->
  <button
    type="submit" 
    style="position:absolute;display:block;left:-10000px;width:1;height:1;overflow:hidden;" 
    onClick="function(evt) {
      console.log('User pressed enter to submit form, or focused to this off-screen button potentially using a screenreader.', evt.target);
    }">
      this is the form submission button
  </button>
  <!-- You could include a hidden label here to explain why there are two submit buttons to screenreader users, there also may be an aria property -->
  <button
    type="button"
    onClick="function(evt) {
      console.log('user clicked custom submit button to submit form', evt.target);
    }">
      this is the visible submit button
  </button>
</form>

jsfiddle

mousedown is a dangerous event to use to trigger non-style actions. Users who accidentally click a button can no longer change their mind. Traditionally, you can select or focus any element on a web page with the option to drag away or refocus to prevent a button action or link navigation. onclick is a nice generic event for many browsers, there is less risk here of weird behavior between different input devices.

As noted in many comments on the accepted solution (including the author), relying on coordinates to determine the origin of an event is not reliable. There is likely always one more way to break the expected behavior no matter how many sanity checks are included. At that point, you've engineered a very complicated solution to a simple problem.

tl;dr use two buttons, hide the "submit" button off-screen.

Good luck!

Answer 4

I have a much simpler answer, which avoids all that complication. And when you hear it you'll think "why didn't I think of that!!". You have 2 forms. All your fields go in the first form, and just the Submit button in the second. The onsubmit of the first just says "return false;", and the onsubmit of the second calls a function which also returns false. But the function called by the second form manually submits the form with all the fields. Hence only the submit button submits the first form, not any return key press of any of its input fields. And of course the user won't know any difference! (except that they are saved from accidentally submitting a form before they're ready)