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

javascript button onclick onkeydown onkeypress

我有一个文本输入和一个按钮（见下文）。当在文本框中按下 Enter 键时，如何使用 JavaScript 触发按钮的单击事件？

我的当前页面上已经有一个不同的提交按钮，所以我不能简单地将按钮设置为提交按钮。而且，我只希望在这个文本框中按下 Enter 键来单击此特定按钮，仅此而已。

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

像我这样的新手的重要提示：这个问题的关键部分是您是否已经在页面上有一个表单，所以已经有一个提交按钮。 jQuery 答案是跨浏览器兼容的，是一个很好的解决方案。

@JoshuaDance，已经有表格/提交不是问题。一个页面可以有许多表单（但不能嵌套），每个表单都有自己的提交。每个表单的每个字段都只会触发该表单的提交。如 this answer 所述。

Black

在 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("按钮代码执行。"); }); 用户名：
密码：

或者在纯 JavaScript 中，以下内容会起作用：

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

查询 event.which 可能比 event.keyCode 或 event.charCode 更好，请参阅 developer.mozilla.org/en/DOM/event.charCode#Notes

keydown 而不是 keyup 是更好的事件。此外，如果您使用的是 asp.net，则必须在最后使用 return false 以阻止 asp.net 仍然拦截事件。

使用 keydown 的问题是按住 enter 会一遍又一遍地触发事件。如果您附加到 keyup 事件，它只会在释放键后触发。

我已经调整了您的代码，在调用 click(); 函数之前添加了 event.preventDefault();，而我的页面有一个表单，并且我已经用 keypress 切换了 keyup，因为它是我唯一的工作处理程序，无论如何，谢谢你的整洁代码！

公平地说，当这个答案发布时，jQuery 几乎是 JS 的代名词。但是现在我们中的很多人完全避免使用 jQuery（因为当你使用像 React 这样的东西时它只是浪费 kb）当我们搜索 JS 问题的答案时会感到恼火，而且通常首先出现的是我们没有的库不想依赖。

icedwater

然后只需将其编码！

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

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

是的，我几乎做到了。我想这只是个人喜好......我喜欢更模块化的方法。 ;)

如果需要停止表单提交：onkeydown="if (event.keyCode == 13) {document.getElementById('btnSubmit').click();event.returnValue=false;event.cancel=true;}"

这对我有用，因为内联方法而不是调用具有类似代码的函数，允许您在调用时返回 false 并避免回发。在我的例子中，“click”方法调用了一个 __doPostback 异步调用，并且没有“return false;”。只会重新加载页面。

我同意 Sam 的观点，这个带有这个内联 JS 代码的代码非常丑陋。您应该始终将 HTML 和 JavaScript 代码分开。

@Sam 永远不会得到您的 wisdom from puppets。痛苦导致恐惧，而恐惧是心灵的杀手。恐惧是带来彻底毁灭的小死亡。我将面对我的恐惧。我会允许它越过我并穿过我。当它过去时，我会转动内在的眼睛，看看它的路径。恐惧消失的地方将一无所有。除了内联事件处理程序。所以，是的，请将您的事件处理程序与您的视图/标记分开，如 this answer does。 ;^)

Anik Islam Abhi

想通了：

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

e = e ||窗口.事件； // 获取事件的最短路径

最佳纯 JavaScript 选项。在 HTML 中添加 JavaScript 作为属性会占用空间，而 jQuery 只是 jQuery（不保证兼容性）。感谢您的解决方案！

如果在 if 中返回 false，则可以避免对密钥进行进一步处理：输入文本：

Ravi Makwana

我已经开发了自定义 javascript 来通过添加类来实现这个功能

示例：<button type="button" class="ctrl-p">Custom Print</button>

在这里查看 Fiddle
-- 或 --
查看运行示例 https://stackoverflow.com/a/58010042/6631280

注意：在当前逻辑上，您需要按 Ctrl + Enter

RustyH

我的可重复使用的 Vanilla JS 解决方案。因此，您可以根据活动的元素/文本框更改哪个按钮被点击。

 <input type="text" id="message" onkeypress="enterKeyHandler(event,'sendmessage')" />
 <input type="button" id="sendmessage" value="Send"/>

function enterKeyHandler(e,button) {
    e = e || window.event;
    if (e.key == 'Enter') {
        document.getElementById(button).click();
    }
}

Niraj Chauhan

这也可能有帮助，一个小的 JavaScript 函数，它工作正常：

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

我知道这个问题已经解决了，但我刚刚发现了一些对其他人有帮助的东西。

问题是在文本框中使用回车键触发按钮单击。您的解决方案是针对“水印”类型的功能。