按下 Enter 键时使用 JavaScript 触发按钮单击

Question

I want to trigger a button click when the Enter button is pressed in my page. I know how to do it if it's in a form. Like this

<form>
    <input id="myInput" placeholder="Some text.." value="">
    <input type="submit" id="myBtn" value="Submit">
</form>

<script>
var input = document.getElementById("myInput");
input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        document.getElementById("myBtn").click();
    }
});
</script>

But how to trigger the button even when the Enter is pressed irrespective of where the focus is in the input element or not. just pressing the Enter button will trigger the button in the page. How can I do that?

Answer 1

You just need to add your event listener to the document instead of the input

document.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        document.getElementById("myBtn").click();
    }
});

Answer 2

You can use document

When use input.addEventListener then it will listen event from input only and when use document.addEventListener then it will listen from the entire page

 var input = document.getElementById("myInput"); document.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); document.getElementById("myBtn").click(); } });

 <form> <input id="myInput" placeholder="Some text.." value=""> <input type="submit" id="myBtn" value="Submit"> </form>

Answer 3

you can bind the keyup event on window or document

window.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        console.log("oops!")
    }
});

Answer 4

不是将事件监听器绑定到那个输入元素，而是像这个 document.addEventListener("keyup", your_function_here); 那样全局绑定监听器。