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