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


106

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

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

3
绑定keypress并检查e.charCode==13(输入按钮)。
布拉德·克里斯蒂

在使用上述代码之前,您是否添加了jQuery库参考?
Milind Anantwar

是的,我确实引用了该库,但不确定为什么它不起作用,但是现在还可以。谢谢
2012年

是的,就像@BradChristie提到的那样,keypresskeydown此答案中提到的是要走的路。
metakermit 2015年

Answers:


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

5
在click事件之后加入“回归假”是也有帮助,以避免违约的页面上的其他按钮进入压榨
deebs

dmitry_romanov的答案更好,因为它是纯HTML。
麦凯2015年

6
@McKay,不,不是。按钮可以用于表单以外的其他内容。实际上,OP的问题显然不是形式上的。
2015年

2
@deebs非常正确,不确定我当天的工作,但我一定是在放屁。
蒂姆在MastersAllen上的


76

现在是2020年。我相信这仍然适用。


不使用 keypress

  1. keypress是事件不会触发当用户按下不产生任何字符的键,例如TabCaps LockDeleteBackspaceEscape,左,右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;`.
});

怎么样: if (event.key == "Enter") { document.querySelector("#linkadd").click(); }
阿努帕姆

2
请注意,.key并非所有浏览器都支持该功能:caniuse.com/#feat=keyboardevent-key-大约10%的人使用不支持该功能的浏览器。
马丁·图尔诺伊

72

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


17
仅当您在表单中时才起作用,OP不使用表单
Andrew

@Andrew是的,我很想念。现在,我可以清楚地看到它了,谢谢。
dmitry_romanov

4
@安德鲁,是的,但是在大多数情况下将其包装成无用的形式并不容易……
Stephen Chung

2
此外,此解决方案可在iOS虚拟键盘的[执行]按钮上运行,其默认操作是提交。
元素

10
  1. 更换buttonsubmit
  2. 渐进的,请确保您有一个服务器端版本
  3. 将您的JavaScript绑定到submit表单的click处理程序,而不是按钮的处理程序

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


6

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

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

2

当输入type =“ button”替换为需要触发的默认按钮的输入type =“ submit”时,它将起作用。



1

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

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

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

0

我找到了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>


-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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.