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

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

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

当前回答

我的可重用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在提交时捕获表单,并做任何你想要的验证或回调。

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

在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() { 警报(“按钮代码已执行。 }); <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> 用户名:<输入 id=“用户名” 类型=“文本”><br> 密码:&nbsp;<输入 id=“pw” 类型=“密码”><br> <按钮 id=“我的按钮”>提交</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(); } }); 功能按钮代码() { 警报(“按钮代码已执行。 } <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> 用户名:<输入 id=“用户名” 类型=“文本”><br> 密码:&nbsp;<输入 id=“pw” 类型=“密码”><br> <button id=“myButton” onclick=“buttonCode()”>提交</button>

在jQuery中,你可以使用event.which==13。如果你有一个表单,你可以使用$('#formid').submit()(将正确的事件监听器添加到该表单的提交中)。

$ (' # textfield ') .keyup(函数(事件){ 如果(event.which = = 13) { $(" #提交”).click (); } }); $(" #提交”).click(函数(e) { 如果($ (' # textfield ') .val () .trim () . length) { alert(“提交!”); }其他{ alert(“字段不能为空!”); } }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <标签= >“文本框” 输入文本:> < /标签 <input id="textfield" type="text"> <按钮id = "提交" > 提交 < /按钮>

这个onchange尝试很接近,但相对于浏览器(在Safari 4.0.5和Firefox 3.6.3上),行为不佳,所以最终,我不会推荐它。

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