将输入键绑定到页面上的特定按钮答案

【问题标题】：Bind enter key to specific button on page将输入键绑定到页面上的特定按钮
【发布时间】：2011-09-26 09:51:54
【问题描述】：

<input type="button" id="save_post" class="button" value="Post" style="cursor:pointer;"/>

如何将个人键盘上的回车键绑定到页面上的这个特定按钮？它不是形式，我也不希望它是。

谢谢！

【问题讨论】：

另见stackoverflow.com/questions/1402698/…
迄今为止所有方法的重大缺陷：文本框也会在输入时提交，而不是允许新行。
@Kaji Shift+Enter 应该仍然有效，但我同意这是个问题

标签： javascript jquery html

【解决方案1】：

无论“Enter”出现在页面的哪个位置，这都会单击按钮：

$(document).keypress(function(e){
    if (e.which == 13){
        $("#save_post").click();
    }
});

【讨论】：

【解决方案2】：

如果你想使用纯javascript：

document.onkeydown = function (e) {
  e = e || window.event;
  switch (e.which || e.keyCode) {
        case 13 : //Your Code Here (13 is ascii code for 'ENTER')
            break;
  }
}

【讨论】：

纯 JavaScript 选项总是一个奖励
window.onkeydown 还是 document.onkeydown？猜猜在这种情况下没关系
这是一个全局函数，重写它不会那么聪明。

【解决方案3】：

使用 jQuery ：

$('body').on('keypress', 'input', function(args) {
    if (args.keyCode == 13) {
        $("#save_post").click();
        return false;
    }
});

或者要将特定输入绑定到不同的按钮，您可以使用选择器

$('body').on('keypress', '#MyInputId', function(args) {
    if (args.keyCode == 13) {
        $('#MyButtonId').click();
        return false;
    }
});

【讨论】：

为什么我们需要return false？表单不会提交。
嗨@Mai，在问题中它专门询问“它不是形式，我也不希望它是”！

【解决方案4】：

带有监听器的Vanilla JS版本：

window.addEventListener('keyup', function(event) {
  if (event.keyCode === 13) {
    alert('enter was pressed!');
  }
});

如果此代码在页面之间共享，请不要忘记删除事件listener。

【讨论】：

【解决方案5】：

也许不是您想要的，但是有一个 HTML 属性可以让您分配一个称为访问键的特定按钮来聚焦或触发元素。是这样的：

<a href='https://www.google.com' accesskey='h'>

大多数元素都可以做到这一点。

这里有一个问题：它并不总是有效。对于 IE 和 chrome，您还需要按住 alt。在 Firefox 上，您需要按住 alt 和 shift（如果在 mac 上则控制）。对于 safari，您需要保持控制和 alt。在 Opera 15+ 上你需要 alt，在 12.1 之前你需要 shift 和 esc。

来源：W3Schools

【讨论】：