【问题标题】:JavaScript keyboard shortcuts for web application [closed]Web应用程序的JavaScript键盘快捷键[关闭]
【发布时间】:2011-04-29 19:38:03
【问题描述】:

我想开发一个 Web 应用程序,它应该(理想情况下)可以通过键盘完全使用。我知道如何在 JavaScript 中处理键盘事件,但是为更大的应用程序管理它们是很无聊的。

有没有一个库可以让这个过程变得更容易?

请注意,我对成熟的 Web GUI 框架不感兴趣。我想控制我的网页/应用程序。

【问题讨论】:

标签: javascript keyboard-shortcuts accessibility access-keys


【解决方案1】:

查看我的项目:

https://github.com/oscargodson/jkey

还有演示:

http://oscargodson.github.com/jKey/

随意使用它,如果你愿意,请贡献:)

【讨论】:

  • 我以为我已经接受了你的回答,所以我想知道为什么你只得到了 50% 的赏金!?
  • 这是因为您在时间结束后接受了,没关系,我需要 25 ;) 如果您确定在投票时间结束之前接受了,您也可以将此标记为错误。跨度>
  • @oscar accept 与赏金无关。 stackoverflow.com/faq#bounty
  • @Jeff 好吧,它只有一半的赏金,我知道如果你等待超过接受时间,你只能得到一半的赏金,对吧?这就是为什么我认为是因为这个原因。那为什么我只能得到一半的赏金呢?只是好奇
  • @Oscar 在 Jeff 链接的页面上进行了解释。赏金不会自动授予接受的答案,必须通过单击小奖励按钮手动授予。如常见问题解答中所述,您获得一半赏金的原因是:如果您在 7 天内未授予您的赏金,则在赏金开始后创建的最高投票答案(至少获得 2 票)将获得一半的赏金数量。(+1 表示有用的答案,顺便说一句)
【解决方案2】:

我刚刚开发了自己的一个,名为Mousetrap。看看这个。

【讨论】:

  • Mousetrap 就是其中之一,它就像我希望的那样工作。干得好。
  • 我同意,这简直太棒了!丢进去就走了。在下载后半小时内实现了键盘快捷键。而且我是 js n00b!
  • konami 代码 - 真棒
  • (在the Mousetrap pageJavaScript,而不是 Javascript。)
【解决方案3】:

您可以使用Hotkeys - 一个 jQuery 插件。 jQuery 是一个非常轻量级的 JavaScript 库 - 它是使用热键所必需的 JavaScript 文件。

【讨论】:

  • +1 用于提及 jQuery 热键。但是,您的以下句子在书面上并没有多大意义。
  • 链接已经死了 - 试试code.google.com/p/js-hotkeys
【解决方案4】:

您可以先阅读accesskey attribute

此属性为元素分配访问键。访问键是文档字符集中的单个字符。笔记。作者在指定访问键时应考虑预期读者的输入法。
[...]
访问密钥的调用取决于底层系统。例如,在运行 MS Windows 的机器上,除了访问键之外,通常还必须按下“alt”键。在 Apple 系统上,除了访问键之外,通常还必须按“cmd”键。

您也可以将accesskey 属性放在<a> 元素上,可以在Wikipedia 的“随机文章”侧边栏链接上找到这种用法的示例。

【讨论】:

  • Accesskeys 用于辅助功能,例如:<a href="home.php" accesskey="1">Home</a>
  • @boudou:是的,但没有理由限制无鼠标的可访问性。 <label> 元素也是为了便于访问,但这并不意味着只有使用屏幕阅读器的人才能使用它。
  • 示例:在 Firefox 中,如果 input 元素具有属性 accesskey="U",则 Shift + Alt + U 会将焦点更改为表单中的 input 元素。
【解决方案5】:

我强烈建议您查看 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-function 也将焦点放在项目名称上,并且绕过了 'n' 字符。
【解决方案6】:

This one 非常好用。

例子:

shortcut.add("Up",     // Key
             go_up()); // Function

【讨论】:

    【解决方案7】:

    您可以使用accesskey HTML 属性,因为它会使您的 Web 应用程序可访问。

    使用KeyTips jQuery 插件以类似于Office Ribbon keyboard shortcuts 的方式向用户显示它们。

    Try the DemoCode on GitHub.

    请注意,the Wikipedia page on accesskey 列出了用于调用不同浏览器的访问键的修饰键。

    另请参阅 A List Apart 文章:Accesskeys: Unlocking Hidden Navigation

    【讨论】:

    • 示例:在 Firefox 中,如果 input 元素具有属性 accesskey="U",则 Shift + Alt + U 会将焦点更改为表单中的 input 元素。
    猜你喜欢
    • 2012-08-10
    • 1970-01-01
    • 1970-01-01
    • 2010-10-05
    • 2021-06-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-19
    相关资源
    最近更新 更多