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

时间:2020-03-06 14:56:57  来源:igfitidea点击:

我有一个文本输入和一个按钮(请参阅下文)。当在文本框中按下" Enter"键时,如何使用JavaScript触发按钮的click事件?

当前页面上已经有一个不同的"提交"按钮,因此我不能简单地将该按钮设为"提交"按钮。而且,我只希望" Enter"键单击该特定按钮(如果从该文本框中按下该按钮),则别无其他。

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

解决方案

将按钮设为Submit元素,这样它将是自动的。

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

请注意,我们需要一个包含输入字段的`<form>'元素才能完成这项工作(感谢Sergey Ilinsky)。

重新定义标准行为不是一个好习惯," Enter"键应始终调用表单上的"提交"按钮。

在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: <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: <input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

想通了:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

然后将其编码!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

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

onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

这只是我从一个最近的项目中获得的东西……我在网上找到了它,我不知道普通的旧JavaScript是否有更好的方法。

虽然,我很确定只要表单中只有一个字段和一个提交按钮,即使页面上还有另一种表单,按回车键也应提交该表单。

然后,我们可以使用js捕获onsubmit表单,并执行所需的任何验证或者回调。

event.returnValue = false

在处理事件时或者在事件处理程序调用的函数中使用它。

它至少可以在Internet Explorer和Opera中工作。

这次onchange尝试已经结束,但是对于浏览器来说,然后再向前(在Safari 4.0.5和Firefox 3.6.3上)表现不佳,因此最终我不推荐这样做。

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