我有一个文本输入和一个按钮(见下文)。我如何使用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键应该总是调用表单上的提交按钮。
其他回答
我已经通过添加类开发了自定义javascript来实现这个功能
例如:<button type="button" class="ctrl-p">自定义打印</button>
来看看提琴
//查找元素 Var banner = $("#banner-message") Var按钮= $("button") //添加类 按钮。(“点击”,函数(){ 如果(banner.hasClass(“alt”)) banner.removeClass(“alt”) 其他的 banner.addClass(“alt”) }) $(文档)时函数(){ 美元(文档)。On ('keydown'，函数(e) { if (e.ctrlKey) { $('[类* = " ctrl - "]:没有([data-ctrl])”)。每个(函数(idx, item) { var关键= $(项目).prop(类).substr(美元(项).prop(类).indexOf (ctrl -) + 5, 1) .toUpperCase (); 美元(项)。attr(“data-ctrl”键); 美元(项)。追加('<div class="tooltip fade top in tooltip-ctrl alter-info" role="tooltip" style="margin-top: -61px;显示:块;可见性:可见;<div class=" font - family:宋体" style=" font - family:宋体;" > < / div > < div class = " tooltip-inner " > CTRL + +键+”< / div > < / div >”) })； ｝ if (e.ctrlKey && e.which != 17) { var Key = String.fromCharCode(e.which).toLowerCase(); 如果($ (' .ctrl - ' +键)。长度== 1){ e.preventDefault (); 如果(! $ (' # divLoader ') .(":可见")) $ (' .ctrl——“+键).click (); console.log("You pressed ctrl + "+Key); ｝ ｝ })； 美元(文档)。On ('keyup'，函数(e) { 如果(e。ctrlKey) { $('[类* = " ctrl - "]”).removeAttr(“data-ctrl”); $ (" .tooltip-ctrl ") .remove (); ｝ }) })； # banner-message { 背景:# fff; border - radius: 4 px; 填充:20 px; 字体大小:25 px; text-align:中心; 过渡:全部0.2秒; 保证金:0自动; 宽度:300 px; ｝ # banner-message。alt { 背景:# 0084 ff; 颜色:# fff; margin-top: 40像素; 宽度:200 px; ｝ # banner-message。Alt键{ 背景:# fff; 颜色:# 000; ｝ < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < div id = " banner-message " > < p > Hello World < / p > <button class="ctrl-s" title="s">改变颜色</button><br/><br/> <span>按CTRL+S触发按钮</span>的单击事件 < / div >
——或—— 查看运行示例 https://stackoverflow.com/a/58010042/6631280
注意:在当前逻辑上，需要按Ctrl + 输入
你可以使用的一个基本技巧，我还没有看到完全提到。如果你想在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来加载一些数据。
将按钮设置为submit元素，这样它就会自动执行。
<input type = "submit"
id = "btnSearch"
value = "Search"
onclick = "return doSomething();"
/>
请注意，您需要一个包含输入字段的<form>元素来完成此工作(感谢Sergey Ilinsky)。
重新定义标准行为并不是一个好的实践，Enter键应该总是调用表单上的提交按钮。
为了添加一个完全简单的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 />";
}
});
}
});
在Angular2:
(keyup.enter)="doSomething()"
如果您不希望按钮中有一些视觉反馈，那么不引用按钮而是直接调用控制器是一个很好的设计。
另外，id也不需要——这是NG2分离视图和模型的另一种方式。
