1377

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

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

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

29 回答 29

1489

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

于 2008-09-30T21:52:16.970 回答
422

然后只需将其编码！

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

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>
于 2008-09-30T21:56:01.623 回答
182

想通了：

<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>
于 2008-09-30T21:52:28.653 回答
85

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

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

请注意，您需要一个<form>包含输入字段的元素才能完成这项工作（感谢 Sergey Ilinsky）。

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

于 2008-09-30T21:33:27.653 回答
77

由于还没有人用过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 的评论，我添加了缺少的事件处理程序和 apreventDefault以允许此代码（可能）也可以在表单中工作。（我将开始对此进行测试，此时我将删除括号中的内容。）

于 2013-11-19T05:37:45.667 回答
60

在纯 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 给出一些东西。

于 2011-02-08T04:49:52.833 回答
23

您可以为此使用的一个基本技巧，我还没有看到完全提到。如果您想执行 ajax 操作，或在 Enter 上进行其他一些工作，但不想实际提交表单，您可以这样做：

<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);" 像这样是本质上防止默认行为的捷径。在这种情况下，无论您是按 Enter 还是单击按钮，都会调用一个方法，然后调用 ajax 来加载一些数据。

于 2013-09-12T19:27:56.980 回答
18

keypress与event.key === "Enter"现代 JS 一起使用！

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

Mozilla 文档

支持的浏览器

于 2018-02-18T18:57:43.770 回答
16

尝试一下：

<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>
于 2015-03-02T08:04:35.977 回答
15

要在每次按下 enter 键时触发搜索，请使用以下命令：

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}
于 2011-10-27T03:35:04.000 回答
14 
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

这只是我从最近的一个项目中得到的东西......我在网上找到了它，我不知道在普通的旧 JavaScript 中是否有更好的方法。

于 2008-09-30T21:56:26.240 回答
13

虽然，我很确定只要表单中只有一个字段和一个提交按钮，即使页面上有另一个表单，按 Enter 键也应该提交表单。

然后，您可以使用 js 捕获表单 onsubmit 并执行您想要的任何验证或回调。

于 2008-10-01T09:51:32.090 回答
13

这是所有YUI爱好者的解决方案：

Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');

在这种特殊情况下，我使用 YUI 触发已注入按钮功能的 DOM 对象确实有更好的结果——但这是另一回事了……

于 2013-08-29T14:01:38.417 回答
12

在Angular2 中：

(keyup.enter)="doSomething()"

如果您不希望按钮中有一些视觉反馈，那么不引用按钮而是直接调用控制器是一个很好的设计。

此外，不需要 id - 另一种分离视图和模型的 NG2 方式。

于 2015-08-22T11:56:32.053 回答
11

没有人注意到有一段时间可用的 html 属性“accesskey”。

这是一种没有 javascript 的键盘快捷键方式。

accesskey_browsers

MDN 上的 accesskey 属性快捷方式

打算这样使用。html 属性本身就足够了，但是我们可以根据浏览器和操作系统更改占位符或其他指示符。该脚本是一种未经测试的从头开始提供想法的方法。您可能想要使用浏览器库检测器，例如小Bowser

let client = navigator.userAgent.toLowerCase(),
    isLinux = client.indexOf("linux") > -1,
    isWin = client.indexOf("windows") > -1,
    isMac = client.indexOf("apple") > -1,
    isFirefox = client.indexOf("firefox") > -1,
    isWebkit = client.indexOf("webkit") > -1,
    isOpera = client.indexOf("opera") > -1,
    input = document.getElementById('guestInput');

if(isFirefox) {
   input.setAttribute("placeholder", "ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>

于 2016-07-07T18:11:03.357 回答
11

在现代，不推荐使用（没有keyCodeor onkeydown）Javascript：

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">
于 2019-01-29T14:02:56.773 回答
10

如果您还想禁用 Posting to server 中的 enter 按钮并执行 Js 脚本。

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
于 2015-04-02T09:37:26.893 回答
9

这个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();" />
于 2010-05-08T19:48:51.707 回答
8 
event.returnValue = false

在处理事件时或在事件处理程序调用的函数中使用它。

它至少可以在 Internet Explorer 和 Opera 中运行。

于 2010-04-22T13:53:26.433 回答
8

对于 jQuery mobile，我必须这样做：

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});
于 2012-05-16T20:44:52.330 回答
8

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

注意：这适用于“现代浏览器”，包括 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 />";
            }
        });
    }
});
于 2015-12-23T18:51:22.987 回答
8

短工作纯 JS

txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1


txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1

function doSomething() {
  console.log('');
}
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

于 2020-06-25T14:46:21.797 回答
6

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

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

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

于 2018-01-28T15:41:02.397 回答
5 
document.onkeypress = function (e) {
 e = e || window.event;
 var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
 if (charCode == 13) {

        // Do something here
        printResult();
    }
};

这是我的两分钱。我正在开发适用于 Windows 8 的应用程序，并希望按钮在按下 Enter 按钮时注册一个单击事件。我在 JS 中这样做。我尝试了一些建议，但遇到了问题。这工作得很好。

于 2014-05-19T12:40:51.240 回答
5

用 jQuery 做到这一点：

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

用普通的 JavaScript 来做到这一点：

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});
于 2015-06-12T18:05:35.077 回答
1

在 jQuery 中，您可以使用event.which==13. 如果您有form，则可以使用$('#formid').submit()（将正确的事件侦听器添加到所述表单的提交中）。

$('#textfield').keyup(function(event){
   if(event.which==13){
       $('#submit').click();
   }
});
$('#submit').click(function(e){
   if($('#textfield').val().trim().length){
      alert("Submitted!");
   } else {
    alert("Field can not be empty!");
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textfield">
Enter Text:</label>
<input id="textfield" type="text">
<button id="submit">
Submit
</button>

于 2018-07-09T22:04:38.743 回答
1

这一天的change活动就是这样！

document.getElementById("txtSearch").addEventListener('change',
    () => document.getElementById("btnSearch").click()
);
于 2020-08-17T07:12:30.760 回答
0

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

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

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

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

于 2019-12-03T12:05:45.780 回答
-4

这也可能有帮助，一个小的 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)" />

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

于 2011-09-13T10:45:41.460 回答