Web 应用程序的 JavaScript 键盘快捷键

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5836596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 19:07:50  来源:igfitidea点击:

JavaScript keyboard shortcuts for web application

javascriptkeyboard-shortcutsaccessibilityaccess-keys

提问by Achim

I want to develop a web application, which should (ideally) be fully usable via the keyboard. I know how to handle keyboard events in JavaScript, but managing them for a larger application is quite boring.

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

Is there a library which makes that process easier?

有没有一个图书馆可以让这个过程更容易?

Please note that I'm not interested in a full-blown Web GUI framework. I want to keep control over my webpage/application.

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

回答by Oscar Godson

Check out my project:

看看我的项目:

https://github.com/oscargodson/jkey

https://github.com/oscargodson/jkey

And demos:

和演示:

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

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

Feel free to use it and if you want, contribute :)

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

回答by Craig

I just developed one of my own called Mousetrap. Check it out.

我刚刚开发了我自己的一个叫做Mousetrap。一探究竟。

回答by lord_t

You can use Hotkeys- a plugin for jQuery. jQuery is a quite lightweight JavaScript library - it is a required JavaScript file for using Hotkeys.

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

回答by mu is too short

You could start by reading about the accesskeyattribute:

您可以先阅读有关accesskey属性的信息

This attribute assigns an access key to an element. An access key is a single character from the document character set. Note. Authors should consider the input method of the expected reader when specifying an accesskey.
[...]
The invocation of access keys depends on the underlying system. For instance, on machines running MS Windows, one generally has to press the "alt" key in addition to the access key. On Apple systems, one generally has to press the "cmd" key in addition to the access key.

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

You can also put the accesskeyattribute on <a>elements, an example of this usage can be found on the "Random Article" sidebar link on Wikipedia.

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

回答by Henrik Joreteg

I would strongly encourage you to check out Thomas Fuchs' keymaster for doing keyboard shortcuts in web applications: https://github.com/madrobby/keymaster

我强烈建议您查看 Thomas Fuchs 的 keymaster 以在 Web 应用程序中使用键盘快捷键:https: //github.com/madrobby/keymaster

It makes it quite simple:

它使它变得非常简单:

// 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(){ });

回答by Sam Hasler

You could use the accesskeyHTML attribute as it would then make your web application accessible.

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

Use the KeyTipsjQuery Plugin to display them to the user in a similar way to Office Ribbon keyboard shortcuts.

使用KeyTipsjQuery 插件以类似于Office 功能区键盘快捷键的方式向用户显示它们。

Enter image description here

在此处输入图片说明

Try the Demo. Code on GitHub.

尝试演示GitHub 上的代码

Note that the Wikipedia page on accesskeylists the modifier keys to invoke access keys for different browsers.

请注意,有关 accesskey 的维基百科页面列出了为不同浏览器调用访问键的修饰键。

See also the A List Apartarticle: Accesskeys: Unlocking Hidden Navigation

另请参阅A List Apart文章:访问键:解锁隐藏导航

回答by bfontaine

This oneis very easy to use.

这个非常容易使用。

Example:

例子:

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