在文本框中按 Enter 时如何触发 HTML 按钮？

Question

所以我到目前为止的代码是：

<fieldset id="LinkList">
    <input type="text" id="addLinks" name="addLinks" value="http://">
    <input type="button" id="linkadd" name="linkadd" value="add">
</fieldset>

它不在<form> 中，就像在<div> 中一样。但是，当我在 textbox 中输入一些名为“addLinks”的内容时，我希望用户能够按 Enter 并触发“linkadd”button，然后它将运行 JavaScript 函数。
我该怎么做？
谢谢

编辑： 我确实找到了这段代码，但它似乎不起作用。

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

Answer 1

$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});

Answer 2

1. 将button 替换为submit
2. 请progressive，确保您有服务器端版本
3. 将您的 JavaScript 绑定到表单的 submit 处理程序，而不是按钮的 click 处理程序

在字段中按 enter 将触发表单提交，并且提交处理程序将触发。

Answer 3

这样就可以了，我用的是jQuery你可以写纯javascript。
用你的功能替换sendMessage()。

$('#addLinks').keypress(function(e) {
    if (e.which == 13) {
        sendMessage();
        e.preventDefault();
    }
});

Answer 4

首先添加jquery库文件jquery并在你的html头中调用它。

然后使用基于 jquery 的代码...

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

Answer 5

您可以像这样向输入添加事件处理程序：

document.getElementById('addLinks').onkeypress=function(e){
    if(e.keyCode==13){
        document.getElementById('linkadd').click();
    }
}

Answer 6

有一个无js的解决方案。

将type=submit 设置为您想要默认的按钮，将type=button 设置为其他按钮。现在在下面的表单中，您可以在任何输入字段中按 Enter，Render 按钮将起作用（尽管它是表单中的第二个按钮）。

例子：

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

在 FF24 和 Chrome 35 中测试（formaction 是 html5 功能，但 type 不是）。

Answer 7

当 input type="button" 被 input type="submit" 替换为需要触发的默认按钮时有效。

Answer 8

根据以前的一些答案，我想出了这个：

<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();
});

看看Fiddle

编辑： 如果你不想添加额外的 html 元素，你可以只用 JS 来做：

    $("input").keyup(function(event) {
        if (event.keyCode === 13) {
            $("button").click();
        }
    });     

Answer 9

我正在使用剑道按钮。这对我有用。

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

Answer 10

现在是，^是的， 2021 年。我相信这仍然适用。

---

不要使用keypress

1. keypress 事件不会触发当用户按下不产生任何字符的键，例如Tab、Caps Lock 、Delete、Backspace、Escape、左右Shift、功能键( F1 - F12）。

keypress 事件 _{Mozilla Developer Network}

keypress 事件在一个键被按下时触发，并且该键通常产生一个字符值。请改用input。

1. 它已被弃用。

keypress 事件 _{UI Events (W3C working draft published on November 8, 2018.)}

• 注意 | keypress 事件通常与检测到 character value 而不是物理键相关联，并且在某些配置中可能并非对所有键都可用。
• 警告 |在本规范中定义keypress 事件类型是为了参考和完整性，但本规范deprecates 使用此事件类型。 在编辑上下文时，作者可以订阅beforeinput 事件而是。

---

不要使用KeyboardEvent.keyCode

1. 它已被弃用。

KeyboardEvent.keyCode _{Mozilla Developer Network}

已弃用 |不再推荐此功能。尽管某些浏览器可能仍然支持它，但它可能已经从相关的 Web 标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅本页底部的the compatibility table 以指导您的决定。请注意，此功能可能随时停止工作。

---

那我应该用什么？ （好的做法）

// Make sure this code gets executed after the DOM is loaded.
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;`.
});

Answer 11

我找到了 w3schools.com howto，他们的 try me 页面如下。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_trigger_button_enter

这在我的常规浏览器中有效，但在我使用内置 php 浏览器的 php 应用程序中无效。

玩了一会儿后，我想出了以下纯 JavaScript 替代方案，它适用于我的情况，并且应该适用于其他所有情况：

    function checkForEnterKey(){
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("myBtn").click();
        }
    }

    function buttonClickEvent()
    {
        alert('The button has been clicked!');
    }

HTML 在文本框内按回车键激活按钮。

    <br />
    <input id="myInput" onkeyup="checkForEnterKey(this.value)">
    <br />
    <button id="myBtn" onclick="buttonClickEvent()">Button</button>

Answer 12

<input type="text" id="input_id" />    

$('#input_id').keydown(function (event) {
    if (event.keyCode == 13) { 
         // Call your function here or add code here
    }
});

Answer 13

请勿在此解决方案中使用 Javascript！！！

现代 HTML 页面自动允许表单的提交按钮在任何表单域控件中使用 ENTER/RETURN 键提交页面与submit 类型按钮或输入相关联的网页具有用户焦点，autofocus 属性设置在任何表单字段、按钮或输入上，或者用户选项卡设置到任何表单字段中。按键盘上的 ENTER 或 RETURN 会自动触发该表单的第一个可用提交按钮或输入控件。

因此，与其使用 JavaScript，更简单的解决方案是在您的任何表单字段上添加 tabindex=0 或在表单元素内添加按钮，然后在第一个输入控件或提交按钮上添加 autofocus。 Tabindex=0 将该输入分配给页面的索引选项卡顺序页面项目列表，并且自动聚焦将焦点转移到您的任何表单字段，触发任何提交按钮以响应 ENTER/RETURN 键命令。用户现在可以按键盘上的“ENTER”在他们喜欢的任何时候提交表单。这还有一个优点，即第一个表单字段被用户关注并准备好接收数据。下面是一个例子：

<form id="buttonform2" name="buttonform2" action="#" method="get" role="form">
  <label for="username1">Username</label>
  <input type="text" id="username1" name="username" value="" size="20" maxlength="20" title="Username" tabindex="0" autofocus="autofocus" />
  <label for="password1">Password</label>
  <input type="password" id="password1" name="password" size="20" maxlength="20" value="" title="Password" tabindex="0" role="textbox" aria-label="Password" />
  <button id="button2" name="button2" type="submit" value="submit" form="buttonform2" title="Submit" tabindex="0" role="button" aria-label="Submit">Submit</button>
</form>

停止编写一切脚本！浏览器拥有这种原生能力已经将近 20 年了！！

Answer 14

使用纯 HTML form:

<form class="my-form" action="javascript:myFunction();">
    <button>Submit</button>
</form>

默认情况下，浏览器会将 Enter 解释为提交表单。 <button> 默认是“提交”类型，并访问位于表单的 action 属性中的任何内容（如果按钮的 formaction 存在则覆盖）。在这种情况下，为简单起见，我使用带有 javascript: pseudo-protocol 的 javascript 函数，但它可以是 javascript 事件侦听器或普通形式的 GET/POST 方法。