Question

我想在我的页面中按下Enter按钮时触发按钮单击。如果采用某种形式，我知道该怎么做。像这样

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

但是无论焦点在输入元素中的何处，即使按下Enter键也如何触发按钮。只需按Enter键将触发页面中的按钮。我该怎么办？

Answer 1

您只需要将事件侦听器添加到文档中，而不是输入即可

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

Answer 2

您可以使用document

使用input.addEventListener时，它将仅侦听来自输入的事件；使用document.addEventListener时，它将侦听整个页面。

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

您可以将keyup事件绑定在窗口或文档上

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

Answer 4

不是将事件侦听器绑定到该输入元素，而是像这样全局绑定侦听器 document.addEventListener（“ keyup”，your_function_here）;

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

4 个答案: