如何在文本框中按Enter键时触发HTMLbutton？
所以我到目前为止的代码是：
<fieldset id="LinkList"> <input type="text" id="addLinks" name="addLinks" value="http://"> <input type="button" id="linkadd" name="linkadd" value="add"> </fieldset> 它不在<form> ，就像在<div> 。 但是，当我在“addLinks” textboxinput内容时，我希望用户能够按Enter键并触发“linkadd” button ，然后运行JavaScript函数。
我怎样才能做到这一点？
谢谢
编辑：我find了这个代码，但它似乎并没有工作。
$("#addLinks").keyup(function(event){ if(event.keyCode == 13){ $("#linkadd").click(); } });
$(document).ready(function(){ $('#TextBoxId').keypress(function(e){ if(e.keyCode==13) $('#linkadd').click(); }); });
有一个免费的解决scheme。
设置type=submit到你想要默认的type=button ，并type=button到其他button。 现在在下面的表单中，您可以在任何input字段中inputEnter，并且Renderbutton将工作（尽pipe它是表单中的第二个button）。
例：
<button id='close_renderer_button' class='btn btn-success' title='Перейти к редактированию программы' type=button> <span class='glyphicon glyphicon-edit'> </span> Edit program </button> <button id='render_button' class='btn btn-primary' title='Построить фрактал' type=submit formaction='javascript:alert("Bingo!");'> <span class='glyphicon glyphicon-send'> </span> Render </button>
testingFF24和Chrome 35（ formaction是html5function，但type不是）。
这是2017年。
不要使用keypress
-
当用户按下一个不产生任何字符的按键 （如Tab ， Caps Lock ， Delete ， Backspace ， Escape ，左右Shift键 ，function键（ F1 – F12 ））时， 不会触发
keypress事件。来自Mozilla开发者networking的
keypress事件keypress会触发keypress事件，该按键通常会产生一个字符值 。 改用input。 -
它被弃用。
DOM级别3的关键事件– W3C工作草案，2016年8月4日 – UI事件
注意：
keypress事件传统上与检测字符值而不是物理键相关联，并且在某些configuration中可能无法在所有键上使用。 警告：keypress事件types是在本规范中定义的，用于引用和完整性，但本规范不赞成使用此事件types。 在编辑上下文时，作者可以订阅beforeinput事件。
不要使用KeyboardEvent.keyCode
- 它被弃用。
来自Mozilla开发者networking的
KeyboardEvent.keyCode弃用：此function已从Web标准中删除。 尽pipe一些浏览器可能仍然支持它，但它正在被丢弃。 避免使用它并尽可能更新现有的代码; 请参阅本页底部的兼容性表格来指导您的决定。 请注意，此function可能随时停止工作。
那我应该用什么？ （好的做法）
ES6版本
// Put this code at the end of the <body>. document.querySelector("#addLinks").addEventListener("keyup", event => { if(event.key !== "Enter") return; // Use `.key` instead. document.querySelector("#linkadd").click(); // Things you want to do. event.preventDefault(); // No need to `return false;`. });
非ES6版本
// Put this code at the end of the <body>. document.querySelector("#addLinks").addEventListener("keyup", function(event) { if(event.key !== "Enter") return; // Use `.key` instead. document.querySelector("#linkadd").click(); // Things you want to do. event.preventDefault(); // No need to `return false;`. });
你可以添加一个事件处理程序到你的input如下所示：
document.getElementById('addLinks').onkeypress=function(e){ if(e.keyCode==13){ document.getElementById('linkadd').click(); } }
- 用
submitreplacebutton - 渐进的 ，确保你有一个服务器端版本
- 将您的JavaScript绑定到表单的
submit处理程序，而不是button的click处理程序
按下input字段将触发表单提交，并提交处理程序将触发。
首先添加jquery库文件的jQuery ，并在您的HTML头调用它。
然后使用基于jQuery的代码…
$("#id_of_textbox").keyup(function(event){ if(event.keyCode == 13){ $("#id_of_button").click(); } });
这应该做到这一点，我使用jQuery，你可以写简单的JavaScript。
将sendMessage()replace为您的function。
$('#addLinks').keypress(function(e) { if (e.which == 13) { sendMessage(); e.preventDefault(); } });
基于以前的一些答案，我想出了这个：
<form> <button id='but' type='submit'>do not click me</button> <input type='text' placeholder='press enter'> </form> $('#but').click(function(e) { alert('button press'); e.preventDefault(); });
看看小提琴
编辑：如果你不想添加额外的HTML元素，你可以用JS做到这一点：
$("input").keyup(function(event) { if (event.keyCode === 13) { $("button").click(); } });
当inputtypes=“button”被inputtypes=“提交”replace为需要触发的默认button时，它起作用。
我正在使用剑道button。 这对我有效。
<div class="form-group" id="indexform"> <div class="col-md-8"> <div class="row"> <b>Search By Customer Name/ Customer Number:</b> @Html.TextBox("txtSearchString", null, new { style = "width:400px" , autofocus = "autofocus" }) @(Html.Kendo().Button() .Name("btnSearch") .HtmlAttributes(new { type = "button", @class = "k-primary" }) .Content("Search") .Events(ev => ev.Click("onClick"))) </div> </div> </div> <script> var validator = $("#indexform").kendoValidator().data("kendoValidator"), status = $(".status"); $("#indexform").keyup(function (event) { if (event.keyCode == 13) { $("#btnSearch").click(); } }); </script>
