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>内。但是，当我在名为“addLinks”的textbox中输入内容时，我希望用户能够按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

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

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

Answer 4

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

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

Answer 5

这应该这样做，我使用jQuery你可以写简单的javascript。
用您的功能替换sendMessage()。

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

Answer 6

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

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

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

Answer 7

当输入类型=“按钮”被输入类型=“提交”替换为需要触发的默认按钮时，它可以正常工作。

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

请勿在此解决方案中使用 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 10

我找到了w3schools.com Howto，其“尝试我”页面位于以下页面。

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 在文本框中按Enter键以激活按钮。

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

Answer 11

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

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

Answer 12

使用纯 HTML form：

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

默认情况下，浏览器会将 Enter 解释为提交表单。 <button> 默认是“提交”类型并访问表单的 action 属性中的任何内容（也可以使用按钮的 formaction 来覆盖）。在这种情况下，我使用带有 javascript: pseudo-protocol 的 javascript 函数，但它可能是正常形式中的 GET/POST 方法。

Answer 13

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

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

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

13 个答案:

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