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

在我的当前页面上已经有一个不同的提交按钮,所以我不能简单地将该按钮设置为提交按钮。并且,我只想让Enter键单击这个特定的按钮,如果它是从这个文本框中按下,没有其他。

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

当前回答

使用按键和事件。键=== "进入"与现代JS!

const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        document.getElementById("btnSearch").click();
    }
});

Mozilla文档

支持的浏览器

其他回答

你可以使用的一个基本技巧,我还没有看到完全提到。如果你想在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>

像这样设置action="javascript:void(0);"本质上是防止默认行为的快捷方式。在这种情况下,无论您是按回车键还是单击按钮,都会调用一个方法,并调用ajax来加载一些数据。

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

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

你可以试试下面的jQuery代码。

$("#txtSearch").keyup(function(e) {
    e.preventDefault();
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if (keycode === 13 || e.key === 'Enter') 
    {
        $("#btnSearch").click();
    }
});

我的可重用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();
    }
}

对于那些可能喜欢简洁和现代js方法的人。

input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});

其中input是包含input元素的变量。