可用于 Web 应用程序的跨浏览器和跨操作系统安全键盘快捷键是啥？

Posted 2023-03-17

【中文标题】可用于 Web 应用程序的跨浏览器和跨操作系统安全键盘快捷键是啥？

【英文标题】：What are cross-browser and cross-OS safe keyboard shortcuts usable for web application?可用于 Web 应用程序的跨浏览器和跨操作系统安全键盘快捷键是什么？

【发布时间】：2011-03-20 18:07:30

【问题描述】：

我正在开发一个相当大的 Web 应用程序，在一些常见任务中使用热键可能是个好主意。但是，我发现对于所有不同的浏览器和操作系统而言，找到安全的组合键是一个问题。

例如，Chrome 有这么长的热键列表，以至于无法尝试为我的 Web 应用程序使用某种逻辑热键方案 - 例如Ctrl + 1, Ctrl + 2, Ctrl + 3 等

您是否有一些安全热键备忘单，可以在 Web 应用程序中使用而不必担心某些浏览器或操作系统干扰？

【问题讨论】：

哦，我忘了发布一个指向微软网站的链接，其中包含他们操作系统中常用的热键：support.microsoft.com/kb/301583

【参考方案1】：

我认为没有这样的列表。对于不同的语言环境，这甚至可能有所不同。

您可以尝试依赖 html 的 accesskey 功能：http://www.w3.org/TR/html401/interact/forms.html#adef-accesskey。这应该保持碰撞的数量相对较小。虽然我相信 Windows 浏览器会将这些键作为 Alt+Letter 提供，它会与菜单栏发生冲突。

也可以像 Google 阅读器和 Gmail 那样做：直接使用字母，无需任何热键修饰符。不过，这只适用于某些类型的应用程序。

【讨论】：

感谢您的回答。问题是热键的大部分功能都发生在文本框中，因此在这种情况下 accesskey 是无用的。用户在表单中输入商店商品，现在我使用例如 ctrl+enter 作为快捷方式来添加商店商品或 ctrl+f1 使用 ajax 查找商品以查看它是否已经存在，等等....我花一些时间在谷歌上搜索，我认为确实没有网络应用程序普遍可用的热键列表。我只是认为这里有人可以为他或她自己制作一个。

【参考方案2】：

我不会指望它。监听使用 Alt 修饰符的快捷键可能没问题，但仍然无法确保键盘快捷键是免费的。用户始终可以安装侦听键盘快捷键的程序，或使用您意想不到的浏览器。

如果仅当用户没有在文本框或其他内容中输入时才能使用快捷键，则最好只听不带修饰键的按键。

如果没有文本框或其他 GUI 元素被聚焦，那么 document.activeElement == document.body 应该为真（如果我错了，请有人纠正我）。

【讨论】：

"监听使用 Alt 修饰符的快捷键可能没问题" 不，Chrome 中有很多 Alt 键盘快捷键。例如，Alt+d 是地址栏，Alt+f 是设置下拉菜单。以下是所有这些：support.google.com/chrome/answer/157179?hl=en

【参考方案3】：

与大多数列表一样，列出（并因此找到）存在的内容比可用的内容更容易。根据您定义“安全热键”的方式，有很多（基本的）或数千个（稍微高级的，例如 Gmail 如何使用两个字母组合（热字串））。

我认为您能做的最好的事情就是查看这两个针对OS 和browser 特定热键的综合列表，并根据它们制作一个列表。如果你想更进一步，here is something that might help you (not tested it myself)。

对于您的具体问题，我认为您应该查看 Gmail、Facebook、Remember the Milk 如何使用热键；因为这些都优雅地解决了你的问题。如果您列出他们使用的内容，您可能会有一个热键列表供您使用。附带说明一下，我使用 Breevy、AutoHotkey 和其他几个程序，我创建了高级类型的热键（43,956 和计数），因为它们是简单的类型，所以几乎没有与他们的系统重叠热键的问题。

【参考方案4】：

根据使用的浏览器，Facebook 使用以下需要不同的主键来按下：

https://www.facebook.com/help/156151771119453?helpref=faq_content

Key Combinations for Different Browsers

Find the right combination of keys for your browser in the list below, and replace # with the access key number listed under access keys below.

Internet Explorer for PC: Alt + #, then Enter
Firefox for PC: Shift + Alt + #
Safari for Mac: Ctrl + Opt + #
Firefox for Mac: Ctrl + Opt + #
Chrome for Mac: Ctrl + Opt + #
Chrome for PC: Alt + #

Access keys
0 - Help
1 - Home
2 - Timeline
3 - Friends
4 - Inbox
5 – Notifications
6 – Settings
7 - Activity Log
8 - About
9 - Terms

但是，Facebook 在所有浏览器中都支持这些快捷方式：

Web Messenger Keyboard Shortcuts
Ctrl + G - Search conversations
Ctrl + Q - Show/hide keyboard shortcuts
Ctrl + Delete - Archive/unarchive conversation
Ctrl + J - Mark as spam
Ctrl + M - Start a new message
Ctrl + I - Go to Inbox
Ctrl + U - Go to Other

结论：一些快捷方式可能适用于所有浏览器，但大多数需要额外说明。

【参考方案5】：

简而言之：否。

建议的修饰键（其他修饰键由操作系统或浏览器使用）：

macOS - control、control+option、control+shift 和控制+选项+shift

win OS - 只需 alt+shift

你可以在macOS上使用control+shift，类似于win上的alt+shift