在文本框中的 Enter 键上使用 JavaScript 触发按钮单击

小编典典

在文本框中的 Enter 键上使用 JavaScript 触发按钮单击

all

我有一个文本输入和一个按钮（见下文）。当在文本框中按下键时，如何使用 JavaScript 触发按钮的单击事件？Enter

我的当前页面上已经有一个不同的提交按钮，所以我不能简单地将按钮设为提交按钮。而且，如果从这个文本框中按下该键，我只
希望该Enter键单击该特定按钮，仅此而已。

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

阅读 72

2022-02-25

共1个答案

小编典典

在 jQuery 中，以下将起作用：

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});



$("#pw").keyup(function(event) {

    if (event.keyCode === 13) {

        $("#myButton").click();

    }

});



$("#myButton").click(function() {

  alert("Button code executed.");

});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



Username:<input id="username" type="text"><br>

Password:&nbsp;<input id="pw" type="password"><br>

<button id="myButton">Submit</button>

或者在纯 JavaScript 中，以下内容会起作用：

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



document.getElementById("pw")

    .addEventListener("keyup", function(event) {

    event.preventDefault();

    if (event.keyCode === 13) {

        document.getElementById("myButton").click();

    }

});



function buttonCode()

{

  alert("Button code executed.");

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



Username:<input id="username" type="text"><br>

Password:&nbsp;<input id="pw" type="password"><br>

<button id="myButton" onclick="buttonCode()">Submit</button>

2022-02-25