如何在 Javascript 中为按钮设置“第一个单词热键”？答案

【问题标题】：How to set a "First Word Hotkey" to button in Javascript?如何在 Javascript 中为按钮设置“第一个单词热键”？
【发布时间】：2014-02-12 13:38:03
【问题描述】：

情况：我有一个 HTML 表单，里面有一些 <input> 和一些信息，还有一个 <input type=submit> 是发送按钮，它将表单内容发送到在action参数上设置的url。

问题：缺少知识（我不知道怎么办）。

我想要的解释：我想要一个热键，例如，现在在您的浏览器或其他常用软件（如记事本）上按键盘上的 Alt 键。你会在屏幕顶部看到一个菜单，以及一些带有下划线的单词，如下所示：

好吧，您会看到带有下划线的 F，并且您知道如果您按下键 F，将打开 File 菜单.

详细说明：我想要的热键，与上面的例子略有不同，但概念相同。因为我想让用户按下： Alt + F 而不是只有 F 来自动点击具有 F 的按钮 设置为自身的热键。

这样，我可以放置一个<input id=F type=button>我使用的属性ID，例如，如果我按下Alt + F按钮会自动点击。

理论上，也许它很容易，但我真的不知道如何在 Javascript 上做到这一点。

有人知道怎么做吗？

【问题讨论】：

您在标签中添加了热键，所以我不确定您是否看过库jquery.hotkeys？
嗯，这很有趣，$(document).on('keypress', null, 'alt+f', fn); 有效，但是，我需要为每个有热键的输入创建一个函数？并一一绑定？如果值不接受 html，我如何在 Button 的第一个单词下划线？ :p
@Wil 请发布一个包含 jquery.hotkeys 实现和上面 cmets 答案的答案，然后我标记为正确

标签： javascript jquery html hotkeys

【解决方案1】：

你想要的是类似的东西

<input type="submit" accesskey="F"/>

现在，当用户点击 Alt + F （或 Alt + Shift + F 在 Firefox 上）这将就像他点击了提交按钮一样。

编辑：在 firefox 上使用 Alt + F 也可以看到这个主题：http://forums.mozillazine.org/viewtopic.php?t=446830

你可以将它改回原来使用 about:config 的方式，更改：

ui.key.chrome访问5

ui.key.contentAccess 4

在 Opera 中，按 Shift + Esc。这会显示当前页面的访问密钥列表。然后，您可以按访问密钥列表中的任何数字来访问相应的链接。用户可以在Tools > Preferences > Mouse and keyboard下更改此键盘快捷键。

【讨论】：

这听起来很完美，但不幸的是它在这里不起作用，我不知道为什么:(
+1 为了这个解决方案的简单和优雅，顺便说一下，我的问题是只使用 Alt + F，因为我的目标是用户体验，用户当然不想使用 Alt + Shift + F 抱歉：p
遗憾的是，这是浏览器控制的行为，如果你想保持一致，我担心你必须采用 javascript 方式，或者说服所有用户使用相同的浏览器。
是的，浏览器控制的行为永远不能被编辑。我知道。顺便说一句，我在这里安装了 Google Chrome、Safari、Opera、IE10 和 Firefox，它们都只有 Alt + Shift + F 工作......你使用的是什么浏览器？
@PauloRoberto 在 Chrome 32 上的 ALT + SHORTCUT 工作正常，在 IE 11 上也是如此，FF 也需要使用 SHIFT 键，但请参阅我的编辑。

【解决方案2】：

如果您要使用jQuery.hotkeys，那么您会将每个键或击键绑定到一个函数并以这种方式处理它。

如果您为按钮提供了您希望它们响应的键的 ID，您可以执行以下操作：

$(document).ready(function () {
    var $doc, altKeys, modified;
    $doc = $(document);
    modified = function (ev) {
        var selector;
        selector = '#' + ev.data.replace(/^alt\+/, '');
        $('button').css({background: 'transparent'});
        $(selector).css({background: 'red'});
    };
    $('button').each(function () {
        var key;
        k = $(this).attr('id');
        $doc.bind('keydown', 'alt+' + k, modified);
    }); 
});

有关工作示例，请参阅 this fiddle

【讨论】：