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

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

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

当前回答

将按钮设置为submit元素,这样它就会自动执行。

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

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

重新定义标准行为并不是一个好的实践,Enter键应该总是调用表单上的提交按钮。

其他回答

由于还没有人使用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的整洁。

请注意,可能有必要确保它在<form>之外,因为当我将这些元素括在其中时,按Enter键提交了表单并重新加载了页面。我眨眼间就发现了。 附录:由于@ruffin的注释,我添加了缺少的事件处理程序和preventDefault,以允许这段代码(大概)也可以在表单中工作。(我将对此进行测试,然后删除括号中的内容。)

不过,我非常确定,只要表单中只有一个字段和一个提交按钮,按回车键就应该提交表单,即使页面上还有另一个表单。

然后你可以用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();
    }
}

那就把它编码进去!

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

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

为了添加一个完全简单的JavaScript解决方案来解决@icedwater的表单提交问题,这里有一个完整的表单解决方案。

注意:这是针对“现代浏览器”,包括IE9+。IE8版本并不复杂,可以在这里学习。


小提琴:https://jsfiddle.net/rufwork/gm6h25th/1/

HTML

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

JavaScript

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we're plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});