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

Posted 2023-02-22

【中文标题】在文本框中按 Enter 时如何触发 HTML 按钮？

【英文标题】：How to trigger HTML button when you press Enter in textbox?

【发布时间】：2012-10-08 22:40:40

【问题描述】：

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

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

【问题讨论】：

绑定到keypress 并检查e.charCode==13（输入按钮）。

在使用上述代码之前，您是否添加了 jquery 库引用？

是的，我确实引用了该库，不知道为什么它不起作用，但现在很好。谢谢

是的，正如@BradChristie 提到的，this answer 中提到的keypress 或keydown 是要走的路。

【参考方案1】：

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

【讨论】：

在点击事件后添加 'return false' 也很有帮助，以避免默认进入页面上的其他按钮

dmitry_romanov's answer 更好，因为它是纯html。

@McKay，不，不是。按钮可以用于表单以外的东西。事实上，OP的问题显然不是形式。

@deebs 非常正确，不知道我那天做了什么，但我一定是在放屁。

警告 It is deprecated currently.

【参考方案2】：

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

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

【参考方案3】：

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

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

【参考方案4】：

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

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

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

【参考方案5】：

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

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

【参考方案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 不是）。

【讨论】：

仅当您在表单中时才有效，OP 未使用表单

@Andrew 是的，我错过了。现在我可以看清楚了，谢谢。

@Andrew，没错，但在大多数情况下，将其包装成无所事事的形式是微不足道的......

此外，此解决方案适用于 ios 虚拟键盘 [Go] 按钮，其默认操作是提交。

如果你将它包装在一个没有任何动作的表单中，它在 Firefox 中将不起作用，因为提交会触发页面重新加载。我能够通过使用来自***.com/a/13118834/12440938 (action="javascript:void(0);") 的解决方案来解决这个问题

【参考方案7】：

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

【参考方案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();
        
    );     

【参考方案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>

【参考方案10】：

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

---

不要使用keypress

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

keypress 事件 _{Mozilla Developer Network}

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

它已被弃用。

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

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

---

不要使用KeyboardEvent.keyCode

它已被弃用。

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;`.
);

【讨论】：

怎么样：if (event.key == "Enter") document.querySelector("#linkadd").click(); ?

请注意，并非所有浏览器都支持.key：caniuse.com/#feat=keyboardevent-key - 大约 10% 的人使用不支持它的浏览器。

@Anupam 很好，如果您觉得不必阻止 Web 浏览器的默认事件处理程序，在这种情况下 (keyup)，很可能不存在。

@MartinTournoij 好吧，不用担心这个。那些不知道.key 是什么的人现在超级小（不到3%）。

所以仍然没有一个很好的方法来用 HTML 做到这一点。早在 VB6 的日子里，按钮上有两个属性：“取消”和“默认” 如果按钮的 Cancel=True，那么点击转义就会触发按钮。如果“默认”为真，则输入或返回触发按钮。我想我可以使用一两个类来解决这个问题。希望 W3C 读到这个:(

【参考方案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>

【讨论】：

它没有像我尝试的那样工作，你需要在checkForEnterKey函数中传递event，并且该函数也应该有事件参数，如下所示：***.com/a/155265/3943968

【参考方案12】：

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

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

【参考方案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 年了！！

【参考方案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 方法。