122

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

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

14 回答 14

122
$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});
于 2012-10-18T12:57:32.633 回答
95

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


不使用keypress

  1. keypress当用户按下不产生任何字符的键时不会触发事件,例如, , , , , left & right , 功能键 ( - )。TabCaps LockDeleteBackspaceEscapeShiftF1F12

keypress活动Mozilla 开发者网络

当按下keypress某个键时会触发该事件,并且该键通常会产生一个字符值。改为使用。input

  1. 它已被弃用。

keypressevent UI Events(2018 年 11 月 8 日发布的 W3C 工作草案。)

  • 注意| 该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;`.
});
于 2017-08-12T13:32:37.993 回答
86

有一个无 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不是)。

于 2014-06-16T14:05:29.980 回答
14
  1. 将 替换buttonsubmit
  2. 进步,确保你有一个服务器端版本
  3. 将您的 JavaScript 绑定到submit表单的处理程序,而不是click按钮的处理程序

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

于 2012-10-18T12:57:56.877 回答
7

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

document.getElementById('addLinks').onkeypress=function(e){
    if(e.keyCode==13){
        document.getElementById('linkadd').click();
    }
}
于 2012-10-18T13:00:50.400 回答
3

当 input type="button" 被 input type="submit" 替换为需要触发的默认按钮时,它可以工作。

于 2016-10-31T10:13:34.217 回答
1

这应该可以,我使用的是 jQuery,你可以编写普通的 javascript。
替换sendMessage()为您的功能。

$('#addLinks').keypress(function(e) {
    if (e.which == 13) {
        sendMessage();
        e.preventDefault();
    }
});
于 2012-10-18T12:58:15.847 回答
1

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

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

$("#id_of_textbox").keyup(function(event){
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});
于 2012-10-18T13:00:36.467 回答
1

根据以前的一些答案,我想出了这个:

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

看看小提琴

编辑:如果你不想添加额外的 html 元素,你可以只用 JS 做到这一点:

    $("input").keyup(function(event) {
        if (event.keyCode === 13) {
            $("button").click();
        }
    });     
于 2016-11-24T22:03:44.940 回答
1

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

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

因此,与其使用 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 年了!!

于 2021-02-15T00:54:16.227 回答
0

我找到了 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>
于 2019-05-24T15:06:33.720 回答
0

使用纯 HTML表单

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

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

于 2021-07-16T17:44:49.000 回答
-1
<input type="text" id="input_id" />    

$('#input_id').keydown(function (event) {
    if (event.keyCode == 13) { 
         // Call your function here or add code here
    }
});
于 2019-07-10T06:13:05.263 回答
-2

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

<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>
于 2017-02-17T15:14:47.260 回答