用文本框中的Enter键触发一个button点击

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

在我的当前页面上已经有了一个不同的提交button，所以我不能简单地按下一个提交button。 而且，我只想要Enter键从这个文本框中按下这个特定的button，没有别的。

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

Answer 1

在jQuery中，以下将工作：

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

或者在普通的JavaScript中，以下内容将起作用：

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

Answer 2

然后，只需编码！

 <input type = "text" id = "txtSearch" onkeydown = "if (event.keyCode == 13) document.getElementById('btnSearch').click()" /> <input type = "button" id = "btnSearch" value = "Search" onclick = "doSomething();" /> 

Answer 3

想通了：

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

Answer 4

使button成为一个提交元素，所以它会自动。

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

请注意，您需要一个包含input字段的<form>元素才能完成这项工作（谢谢Sergey Ilinsky）。

重新定义标准行为不是一个好习惯， 回车键应该总是调用表单上的提交button。

Answer 5

由于没有人使用addEventListener呢，这里是我的版本。 鉴于以下要素：

 <input type = "text" id = "txt" /> <input type = "button" id = "go" /> 

我会使用以下内容：

 var go = document.getElementById("go"); var txt = document.getElementById("txt"); txt.addEventListener("keypress", function(event) { event.preventDefault(); if (event.keyCode == 13) go.click(); }); 

这使您可以单独更改事件types和操作，同时保持HTML清洁。

请注意 ，确保这是在<form>之外是值得的，因为当我将这些元素包含在它们中时，按Enter键提交表单并重新加载页面。 带了我几眨眼来发现。

附录 ：感谢@ruffin的评论，我已经添加了缺less的事件处理程序和一个preventDefault以允许此代码（大概）在表单中工作。 （我会绕过testing这个，在这一点上，我将删除括号内容。）

Answer 6

在普通的JavaScript中，

 if (document.layers) { document.captureEvents(Event.KEYDOWN); } document.onkeydown = function (evt) { var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode; if (keyCode == 13) { // For Enter. // Your function here. } if (keyCode == 27) { // For Escape. // Your function here. } else { return true; } }; 

我注意到，答复是只在jQuery中给出的，所以我想用普通的JavaScript来提供一些东西。

Answer 7

一个基本的技巧，你可以用这个，我没有看到完全提到。 如果你想做一个Ajax操作，或者其他一些工作，但不想实际提交表单，你可以这样做：

 <form onsubmit="Search();" action="javascript:void(0);"> <input type="text" id="searchCriteria" placeholder="Search Criteria"/> <input type="button" onclick="Search();" value="Search" id="searchBtn"/> </form> 

设置action =“javascript：void（0）;” 像这是本质上防止违约行为的捷径。 在这种情况下，无论您按Enter还是点击button，都会调用一个方法，并调用ajax来加载一些数据。

Answer 8

要在每次按下回车键时触发search，请使用以下命令：

 $(document).keypress(function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == '13') { $('#btnSearch').click(); } } 

Answer 9

尝试一下：

 <input type="text" id="txtSearch"/> <input type="button" id="btnSearch" Value="Search"/> <script> window.onload = function() { document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) { if (event.keyCode == 13) { document.getElementById('btnSearch').click(); } }; document.getElementById('btnSearch').onclick =doSomething; } </script> 

Answer 10

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

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

Answer 11

虽然我很确定，只要表单中只有一个字段和一个提交button，即使页面上有另一个表单，按回车也应提交表单。

然后，您可以捕捉与js提交表单，并做任何validation或callback你想要的。

Answer 12

这是所有YUI爱好者的解决scheme：

 Y.on('keydown', function() { if(event.keyCode == 13){ Y.one("#id_of_button").simulate("click"); } }, '#id_of_textbox'); 

在这种特殊情况下，使用YUI触发已经注入了buttonfunction的DOM对象的确有更好的结果 – 但这是另外一个故事…

Answer 13

这个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();" /> 

Answer 14

 event.returnValue = false 

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

它至less在Internet Explorer和Opera中起作用。

Answer 15

对于jQuery的移动我不得不这样做

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

Answer 16

在这种情况下，您还需要将“input”button从“发送”到服务器并执行Js脚本。

 <input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13) {document.getElementById('btnSearch').click(); return false;}"/> <input type="button" id="btnSearch" value="Search" onclick="doSomething();" /> 

Answer 17

在Angular2中 ：

 (keyup.enter)="doSomething()" 

如果您不想在button中使用某些视觉反馈，则不需要引用button，而是直接调用控制器。

另外，这个id是不需要的 – 另一种NG2在视图和模型之间分离的方式。

Answer 18

为了添加一个完全普通的JavaScript解决scheme来解决@ icedwater的问题和表单提交 ，这里有一个完整的解决scheme。

注：这是“现代浏览器”，包括IE9 +。 IE8的版本并不复杂，可以在这里了解到 。

---

小提琴： https ： //jsfiddle.net/rufwork/gm6h25th/1/

HTML

 <body> <form> <input type="text" id="txt" /> <input type="button" id="go" value="Click Me!" /> <div id="outige"></div> </form> </body> 

JavaScript的

 // The document.addEventListener replicates $(document).ready() for // modern browsers (including IE9+), and is slightly more robust than `onload`. // More here: https://stackoverflow.com/a/21814964/1028230 document.addEventListener("DOMContentLoaded", function() { var go = document.getElementById("go"), txt = document.getElementById("txt"), outige = document.getElementById("outige"); // Note that jQuery handles "empty" selections "for free". // Since we're plain JavaScripting it, we need to make sure this DOM exists first. if (txt && go) { txt.addEventListener("keypress", function (e) { if (event.keyCode === 13) { go.click(); e.preventDefault(); // <<< Most important missing piece from icedwater } }); go.addEventListener("click", function () { if (outige) { outige.innerHTML += "Clicked!<br />"; } }); } }); 

Answer 19

 document.onkeypress = function (e) { e = e || window.event; var charCode = (typeof e.which == "number") ? e.which : e.keyCode; if (charCode == 13) { // Do something here printResult(); } }; 

我的两毛钱 我正在为Windows 8的应用程序工作，并希望按下button时注册一个点击事件。 我正在JS做这个。 我尝试了几个build议，但有问题。 这工作得很好。

Answer 20

没有人注意到一段时间以来可用的html属性“accesskey”。 这是一个没有javascript键盘shorcut的东西的方式。

accesskey属性在MDN上的快捷方式

像这样使用 html属性本身就够了，我们可以根据浏览器和操作系统改变占位符或其他指标。 该脚本是一个未经考验的从头开始的想法。 你可能想要使用浏览器库检测器，比如微型浏览器

 let client = navigator.userAgent.toLowerCase(); isLinux = client.indexOf("linux") > -1; isWin = client.indexOf("windows") > -1; isMac = client.indexOf("apple") > -1; isFirefox = client.indexOf("firefox") > -1; isWebkit = client.indexOf("webkit") > -1; isOpera = client.indexOf("opera") > -1; input = document.getElementById('guestInput'); if(isFirefox) { input.setAttribute("placeholder", "Access keys: ALT+SHIFT+Z"); } else if (isWin) { input.setAttribute("placeholder", "Access keys: ALT+Z"); } else if (isMac) { input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z"); } else if (isOpera) { input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z"); } else {'Point me to operate...'} 

 <input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input> 

Answer 21

用jQuery来做到这一点：

 $("#txtSearch").on("keyup", function (event) { if (event.keyCode==13) { $("#btnSearch").get(0).click(); } }); 

用普通的JavaScript来做到这一点：

 document.getElementById("txtSearch").addEventListener("keyup", function (event) { if (event.keyCode==13) { document.getElementById("#btnSearch").click(); } }); 

Answer 22

这也可能有帮助，一个小的JavaScript函数，工作正常：

 <script type="text/javascript"> function blank(a) { if(a.value == a.defaultValue) a.value = ""; } function unblank(a) { if(a.value == "") a.value = a.defaultValue; } </script> <input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" /> 

我知道这个问题已经解决了，但是我find了一些可以帮助别人的东西。