在文本框中按下“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();
    }
});

原文由 Ben 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Man Programmer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

---

不要使用 keypress

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

keypress 事件Mozilla 开发者网络

keypress 事件在 按下 某个键时触发，该键通常 会产生一个字符值。使用 input 代替。

1. 它已被弃用。

keypress 事件UI 事件（2018 年 11 月 8 日发布的 W3C 工作草案。）

• 注意 | keypress 事件传统上与 检测 字符值 而不是物理键 相关联，并且在某些配置中可能不适用于所有键。
• 警告 | keypress 事件类型在本规范中定义用于参考和完整性，但 本规范 反对 使用此事件类型。 在编辑上下文时，作者可以改为订阅 beforeinput 事件。

---

不要使用 KeyboardEvent.keyCode

1. 它已被弃用。

KeyboardEvent.keyCode Mozilla 开发者网络

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

---

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

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

原文由 Константин Ван 发布，翻译遵循 CC BY-SA 4.0 许可协议