logo标签列表

JavaScript网页应用程序键盘快捷键

javascriptkeyboard-shortcutsaccessibilityaccess-keys
29

我想开发一个Web应用程序，最好可以完全通过键盘使用。我知道如何在JavaScript中处理键盘事件，但处理更大的应用程序非常无聊。

是否有库可以使这个过程更容易？

请注意，我不需要一个完整的Web GUI框架。我想保持对我的网页/应用程序的控制。

你看过这个吗：http://www.openjs.com/scripts/events/keyboard_shortcuts/ - Karl Andrew
悬赏和接受没有任何关系；请参阅http://stackoverflow.com/faq#bounty。 - Jeff Atwood
这是一篇关于为Web应用程序选择键盘快捷方式的文章：https://medium.com/design-ux/a7c3b7b408ee - KIR
7个回答
37
我以为我已经接受了你的答案，所以我想知道为什么你只得到了50%的赏金！？ - Achim
这是因为你在时间结束后才接受的，没关系，我会接受25的。如果你确定你在投票时间结束前接受了，你也可以将其标记为错误。 - Oscar Godson
@oscar接受与赏金无关。http://stackoverflow.com/faq#bounty - Jeff Atwood
@Jeff 嗯，这只是赏金的一半，如果你在接受时间之后等待，那么我知道你只能得到一半的赏金，对吧？这就是为什么我认为是因为这个原因。那我为什么只能得到一半的赏金呢？只是好奇。 - Oscar Godson
@Oscar，这在Jeff链接的页面上有解释。赏金不会自动授予被接受的答案，必须通过点击小奖励按钮手动授予。正如FAQ中所解释的那样，你只得到了一半的赏金是因为：如果您在7天内没有授予赏金，则将授予至少有2个赞的赏金开始后创建的最高投票答案的一半赏金金额。 （顺便说一句，这是一个有用的答案+1） - Mia Clarke
当我按下'a'、'd'键时，会出现"你按下了alt + d"的提示，嗯...这不是我预期的结果... - Simon
18

我刚刚开发了一个自己的技术叫做Mousetrap，欢迎查看。

2
Mousetrap 是那种一切都像我希望的那样顺利运行的东西。干得好。 - prototype
我同意，真是太棒了！只需放入并开始使用。在下载后的半小时内实现了键盘快捷键。而我是一个 JavaScript 新手！ - JoeyC
小鹿斑比代码 - 太棒了 - jleach
1
在MouseTrap页面上：*JavaScript，而不是Javascript*。 - Peter Mortensen
10

您可以使用Hotkeys - 一个用于jQuery的插件。jQuery是一款相当轻量级的JavaScript库 - 它是使用Hotkeys所需的JavaScript文件。

5
提到 jQuery 快捷键值得点赞。但你后面的句子写得不是很通顺易懂。 - jessegavin
链接已失效 - 请尝试访问http://code.google.com/p/js-hotkeys/。 - Onimusha
5
你可以先阅读关于 accesskey 属性的说明：

这个属性为元素分配一个访问键。访问键是来自文档字符集的单个字符。注意：作者在指定访问键时应考虑预期读者的输入方法。
[...]
访问键的调用取决于底层系统。例如，在运行 MS Windows 的计算机上，通常还需要按下“Alt”键以外加访问键。在 Apple 系统上，通常还需要按下“Cmd”键以外加访问键。

你也可以将 accesskey 属性放在 <a> 元素上，例如在维基百科的“随机文章”侧边栏链接上就有使用示例：Wikipedia。
1
Accesskeys是为了辅助功能而设计的，例如：<a href="home.php" accesskey="1">主页</a>。 - bfontaine
@boudou: 没错，但没有理由限制无鼠操作的可访问性。<label>元素也是为了可访问性，但这并不意味着只有使用屏幕阅读器的人可以使用它。 - mu is too short
在Firefox中，如果input元素具有属性accesskey="U"，则Shift + Alt + U将把焦点更改到表单中的input元素。 - Peter Mortensen
3
我强烈建议您使用 Thomas Fuchs 的 keymaster 来为 Web 应用程序设置键盘快捷键：https://github.com/madrobby/keymaster。
这使得设置变得非常简单：
// Define short of 'a'
key('a', function(){ alert('you pressed a!') });

// Returning false stops the event and prevents default browser events
key('ctrl+r', function(){ alert('stopped reload!'); return false });

// Multiple shortcuts that do the same thing
key('⌘+r, ctrl+r', function(){ });
这太棒了。有没有办法防止绕过密钥？ 我已经实现了按下“n”打开一个带有新项目的对话框。然而，“newItem”函数也将焦点放在了项目名称上，导致“n”字符被绕过。 - Asle G
2

这个非常容易使用。

示例：

shortcut.add("Up",     // Key
             go_up()); // Function
2
1
在Firefox中，如果input元素具有属性accesskey="U"，则Shift + Alt + U将把焦点更改到表单中的input元素。 - Peter Mortensen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接