Hitting enter instead of clicking submit is not working in JavaScript

Question

I am trying to allow my user to hit enter in the input field which should trigger the same click event as if they had clicked on the "submit" button with their mouse.

document.getElementById("input").addEventListener("keyup", function() {     
    if (KeyboardEvent.code == "13") {                                        
        document.getElementById("button").click();                          
    }
});

However the keycode doesn't work. The content of the function works when I do KeyboardEvent.code != "13" but I don't know how to make it listen to only the enter key.

I have tried looking t other questions on Stackoverflow (notably here), but my code editor is saying those notations are deprecated.

score 1 · Answer 1 · answered Apr 06 '21 at 15:11

I think that the issue is in a misunderstanding of KeyboardEvent.code https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code meaning. In your case, it will always equal undefined. Instead, you need to get the code from the event. See the example below

document.getElementById("input").addEventListener("keyup", function (e) {
  if (e.code === "Enter") {
    document.getElementById("button").click();
  }
});

score 0 · Answer 2 · answered Apr 06 '21 at 15:03

To handle this behavior in a form you only need to have a form with a submit button:

<form onSubmit="someSubmitFn()" method="post">
  <!-- form elements -->
  <button type="submit">Submit</button>
</form>

You can also try with e.keyCode instead of KeyboardEvent.code:

document.getElementById("input").addEventListener("keyup", function(e) {     
    if (e.keyCode == "13") {                                        
        document.getElementById("button").click();                          
    }
});

Hitting enter instead of clicking submit is not working in JavaScript

2 Answers2