在文本框中的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();" />

