在 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.

Answer 1

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();
  }
});

Answer 2

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();                          
    }
});