在文本框中按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>

它不在a中<form>,就像在a中一样<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

有一个免费的解决方案.

设置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 3

现在是2019年.

不使用 keypress

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

   keypress活动_{Mozilla开发者网络}

   按下keypress某个键时会触发该事件,该键通常会产生一个字符值.请改用.input

2. 它已被弃用.

   keypress事件_{UI事件(W3C工作草案于2018年11月8日发布)}

   • 注意 | 该keypress事件传统上与检测字符值而不是物理键相关联,并且在某些配置中可能不适用于所有键.
   • 警告 | 的keypress事件类型是在本说明书中以供参考和完整性所定义,但本说明书中不赞成使用该事件类型的.在编辑上下文时,作者可以订阅该beforeinput事件.

不使用 KeyboardEvent.keyCode

1. 它已被弃用.

   KeyboardEvent.keyCode _{Mozilla开发者网络}

   不推荐使用 | 不再推荐此功能.虽然某些浏览器可能仍然支持它,但它可能已经从相关的Web标准中删除,可能正在被删除,或者可能仅为了兼容性目的而保留.避免使用它,并尽可能更新现有代码; 请参阅本页底部的兼容性表,以指导您的决定.请注意,此功能可能随时停止运行.

那我应该怎么用？(好的做法)

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

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

在字段中按Enter将触发表单提交,并且将触发提交处理程序.

Answer 5

您可以为输入添加事件处理程序,如下所示:

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