题 在文本框中的Enter键上使用JavaScript触发按钮单击


我有一个文本输入和一个按钮(见下文)。我该如何使用JavaScript? 触发按钮的单击事件 当。。。的时候 输入 在文本框内按下键?

我当前页面上已经有一个不同的提交按钮,所以我不能简单地将按钮设置为提交按钮。和我 只要 想要的 输入 如果从这个文本框中按下该按钮,则单击此特定按钮的键,没有别的。

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

1099
2017-09-30 21:32


起源


如果有两个输入文本而不是一个文本怎么办?它将绑定到哪一个?
像我这样的新手的重要提示:这个问题的关键部分是如果你已经在页面上有一个表单,那么已经有一个提交按钮。 jQuery的答案是跨浏览器兼容并且是一个很好的解决方案。 - Joshua Dance
@JoshuaDance,已经有表格/提交并不是一个麻烦。页面可以有多种形式(但不是嵌套的),每种形式都有自己的提交。每个表单的每个字段只会触发该表单的提交。如上所述 这个答案。 - Frédéric
可能重复 适用于Android OS / iOS / debian linux的Keypress或keydown事件(点击Enter键) - Pooja Kedar


答案:


在jQuery中,以下内容可行:

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

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

$("#myButton").click(function() {
  alert("Button code executed.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

或者在纯JavaScript中,以下内容可行:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>


1286
2017-09-30 21:52



查询event.which比event.keyCode或event.charCode更好的做法,请参阅 developer.mozilla.org/en/DOM/event.charCode#Notes - William Niu
keydown 不 keyup 是更好的事件。此外,如果您使用的是asp.net,则必须这样做 return false 最后阻止asp.net仍然拦截事件。 - maxp
使用问题 keydown 按住enter将一遍又一遍地发射事件。如果你附上 keyup 事件,它只会在密钥释放后触发。 - Steve Paulo
我已经调整了你的代码添加 event.preventDefault(); 在调用之前 click(); 功能,而我的页面有一个表格,我已切换 keyup 同 keypress 因为它是我唯一的工作处理程序,无论如何,感谢整齐的代码! - Adrian K.
@Hugo你不能用 $(this) 因为父ID是文本框的ID,也是您想要的ID click() on是按钮ID。 - boxspah


然后只需编入代码即可!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>

359
2017-09-30 21:56



是的,我几乎那样做了。我想这只是个人偏好的事情......我喜欢更模块化的方法。 ;) - kdenney
如果你需要停止表单提交:onkeydown =“if(event.keyCode == 13){document.getElementById('btnSubmit')。click(); event.returnValue = false; event.cancel = true;}” - GabrielC
这对我有用,因为内联方法,而不是调用其中类似代码的函数,允许您在调用时返回false并避免回发。在我的例子中,“click”方法调用__doPostback异步调用而没有“return false;”只会重新加载页面。 - Dave
内联JavaScript会导致痛苦。痛苦导致痛苦...... - Sam
@Sam永远不会得到你的 来自木偶的智慧。疼痛导致 恐惧而恐惧是心灵杀手。恐惧是带来完全消失的小死亡。我将面对我的恐惧。我会允许它通过我和我。当它过去时,我会转动内心的眼睛来看它的路径。恐惧消失的地方什么也没有。除了内联事件处理程序。所以,是的,请将您的事件处理程序与您的视图/标记分开 这个答案有。 ; ^) - ruffin


想出这个:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

165
2017-09-30 21:52



e = e || window.event; //获取活动的最短途径 - Victor
最好的纯JavaScript选项。添加JavaScript作为HTML中的属性是耗费空间的,而jQuery只是jQuery(不保证兼容性)。谢谢你的解决方案! - boxspah
如果你在if中返回false,你可以避免进一步处理密钥:<input type =“text”id =“txtSearch”onkeypress =“searchKeyPress(event);” /> <input type =“button”id =“btnSearch”Value =“Search”onclick =“doSomething();” /> <script> function searchKeyPress(e){//在e = e ||中未传递事件的情况下查找window.event window.event; if(e.keyCode == 13){document.getElementById('btnSearch')。click();返回虚假; } return true; } </ script> - Jose Gómez


使按钮成为提交元素,因此它将是自动的。

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

请注意,您需要一个 <form> 包含输入字段的元素使这项工作(感谢Sergey Ilinsky)。

重新定义标准行为并不是一个好习惯 输入 key应始终调用表单上的提交按钮。


75
2017-09-30 21:33



花花公子!阅读他的整个问题。页面上已经有另一个提交按钮,所以这对他不起作用。 - skybondsor
有趣的是,我最近尝试在SharePoint中执行此操作。但是,SharePoint已经有一个包装所有内容的表单,以及任何内容 <form> 标签被其他自由的HTML解析器抛出。所以我必须劫持按键或胸围。 (顺便说一下,按Enter键进入SharePoint会因某种原因启动编辑模式。我猜功能区使用相同的表单。)
一个 <button type="submit" onclick="return doSomething(this)">Value</button> 努力。线索在于 return 关键词 - Gus


因为没有人使用过 addEventListener 然而,这是我的版本。鉴于要素:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

我会使用以下内容:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

这允许您在保持HTML清洁的同时单独更改事件类型和操作。

注意 这可能是值得的,以确保这是在a。之外 <form> 因为当我将这些元素包含在其中时按Enter提交表单并重新加载页面。我发现了一些眨眼之处。

附录:感谢@ruffin的评论,我添加了缺少的事件处理程序和一个 preventDefault 允许此代码(可能)在表单内部工作。 (我将开始测试这个,此时我将删除括号内容。)


67
2017-11-19 05:37



我真的不明白为什么JQeuery答案有更多的赞成。我为webdevelopement社区哭泣。 - David
所有你真正缺少的是你的按键处理程序中的参数和a e.preventDefault() 让它使用表单。看到 我的(新的)答案。 - ruffin
除非你不打算让你的用户真正输入任何数据,否则你应该真的这样做 if (event.keyCode == 13) { event.preventDefault(); go.click();} - unsynchronized
使用jQuery只是为了这个小东西肯定没用。它也可以很容易地与CSP一起工作,并且加载时间更短。如果可以,请使用此功能。 - Avamander


在纯JavaScript中,

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

我注意到答案只在jQuery中给出,所以我想用普通的JavaScript给出一些东西。


55
2018-02-08 04:49



document.layers?你还在支持Netscape吗?!! - Victor
是的,必须支持网景... - Varun
不,你不需要支持Netscape。 blog.netscape.com/2007/12/28/... - kingdango
netscape.com甚至不再存在(它重定向到aol.com)但仍然有人支持nescape,太棒了。 - LeartS
evt.which ? evt.which : evt.keyCode 等于 evt.which || evt.keyCode - user


你可以使用的一个基本技巧,我没有看到完全提到过。如果您想在Enter上执行ajax操作或其他工作,但又不想实际提交表单,则可以执行以下操作:

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

设置动作=“javascript:void(0);”这样就是防止默认行为的捷径。在这种情况下,无论您是按Enter键还是单击按钮,都会调用一个方法,并调用ajax来加载某些数据。


19
2017-09-12 19:27



这是移动设备支持的更好解决方案。它会自动隐藏Android设备上的键盘,如果添加则会自动隐藏iOS searchCriteria.blur(); 到了 onsubmit。 - Aaron Gillion
这不起作用,因为页面中已有另一个提交按钮。 - Jose Gómez
@JoseGómez,一个页面可以拥有与dev愿望一样多的提交按钮,仅由相应的字段触发。它只需要为每组字段/提交提供不同的表单。页面不限于单个表单。 - Frédéric
@Frederic:从问题我(错误?)了解到另一个提交按钮的形式相同: “我当前页面上已有一个不同的提交按钮,因此我不能简单地将按钮设为提交按钮。” - Jose Gómez
这是一个很好的答案,因为它允许自定义操作,但避免需要一堆花哨的覆盖代码。 - Beejor


尝试一下:

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}
</script>

13
2018-03-02 08:04





要在每次按下回车键时触发搜索,请使用以下命令:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}

12
2017-10-27 03:35