我有一个文本输入和一个按钮（见下文） . 当在文本框中按Enter键时，如何使用JavaScript trigger the button's click event ？

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

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

25 回答

9

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

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

回复于 2024-04-29T22:33:17+08:00

对于jquery mobile我必须这样做

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});

回复于 2024-04-29T22:33:17+08:00

7
```
event.returnValue = false
```
在处理事件时或在事件处理程序调用的函数中使用它 .

它至少适用于Internet Explorer和Opera .
回复于 2024-04-29T22:33:17+08:00

然后只需编入代码即可！

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

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

回复于 2024-04-29T22:33:17+08:00

8
```
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中这样做 . 我尝试了几个建议，但有问题 . 这很好用 .
回复于 2024-04-29T22:33:17+08:00
6
你可以使用的一个基本技巧，我没有看到完全提到过 . 如果您想在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>
```
设置动作=“javascript：void（0）;”这样就是防止默认行为的捷径 . 在这种情况下，无论您是按Enter键还是单击按钮，都会调用一个方法，并调用ajax来加载某些数据 .
回复于 2024-04-29T22:33:17+08:00

368

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

回复于 2024-04-29T22:33:17+08:00

76
在 Angular2 ：
```
(keyup.enter)="doSomething()"
```
如果你不想在按钮中有一些视觉反馈，那么不引用按钮而是直接调用控制器是一个很好的设计 .

此外，不需要id - 另一种在视图和模型之间分离的NG2方式 .
回复于 2024-04-29T22:33:17+08:00

在这种情况下，您还需要将“输入”按钮从“发布”更改为服务器并执行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();" />

回复于 2024-04-29T22:33:17+08:00

使用keypress和event.key ===使用现代JS“Enter”！

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

Mozilla Docs

Supported Browsers

回复于 2024-04-29T22:33:17+08:00

4
```
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"
```
这只是我最近的一个项目所得到的......我在网上发现它，我不知道在普通的旧JavaScript中是否有更好的方法 .
回复于 2024-04-29T22:33:17+08:00

没有人注意到html attibute“accesskey”，它已经有一段时间了 .

这是一种没有javascript方式的键盘快捷键的东西 .

The accesskey attributes shortcuts on MDN

不知不觉就像这样使用 . 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", "Access keys: ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "Access keys: ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}

<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>

回复于 2024-04-29T22:33:17+08:00

要添加一个解决@icedwater's issue with form submission的完全简单的JavaScript解决方案，这里有一个完整的解决方案 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!
";
            }
        });
    }
});

回复于 2024-04-29T22:33:17+08:00

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

回复于 2024-04-29T22:33:17+08:00

167

用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();
    }
});

回复于 2024-04-29T22:33:17+08:00

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

回复于 2024-04-29T22:33:17+08:00

Try it:

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

回复于 2024-04-29T22:33:17+08:00

1319

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

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

回复于 2024-04-29T22:33:17+08:00

55
由于还没有人使用 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，以允许此代码（可能）在表单内部工作 . （我将开始测试这个，此时我将删除括号内容 . ）
回复于 2024-04-29T22:33:17+08:00

-4

想出这个：

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

回复于 2024-04-29T22:33:17+08:00

11
这个 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();" />
```
回复于 2024-04-29T22:33:17+08:00
10
这是所有人的解决方案 YUI 恋人在那里：
```
Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');
```
在这个特殊情况下，我确实有更好的结果使用YUI来触发已经注入按钮功能的DOM对象 - 但这是另一个故事......
回复于 2024-04-29T22:33:17+08:00
6
对于那些可能喜欢简洁和现代js方法的人 .
```
input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});
```
其中 input 是包含输入元素的变量 .
回复于 2024-04-29T22:33:17+08:00
0
使按钮成为提交元素，因此它将是自动的 .
```
<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>
```
请注意，您需要一个包含输入字段的 <form> 元素才能使其工作（感谢Sergey Ilinsky） .

重新定义标准行为不是一个好习惯，Enter键应始终调用表单上的提交按钮 .
回复于 2024-04-29T22:33:17+08:00

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

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

回复于 2024-04-29T22:33:17+08:00

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

25 回答

使用keypress和event.key ===使用现代JS“Enter”！

HTML

JavaScript

相关问题