在浏览器中获取accesskeys的组合键

Question

我想创建一个页面，其中某些输入和链接附加了访问键，我想告知用户他们需要按什么键组合来激活输入或链接。有没有办法通过JavaScript自动获取浏览器的accesskey组合键，或者我是否需要检测它是哪个浏览器然后只使用我存储浏览器使用的组合键的表？

我还没有发现任何可以自动检测到此脚本的脚本（我查看了维基百科的源代码，它们也按照浏览器名称），我觉得很好奇，因为大多数网站似乎都建议使用功能检测反对浏览器检测。如果accesskeys是例外，我会觉得很奇怪。

另外，根据Wikipedia，访问密钥有很多不同的密钥组合，所以我认为制作一组组合并选择浏览器的组合将是最佳解决方案。

Answer 1

根据HTML5，有一个JS attribute called accessKeyLabel应根据accesskey attribute的值返回适合浏览器的字符串。

您所关注的所有浏览器/版本中的此may not work，但在这种情况下，您需要手动浏览器嗅探和分支回退。 10-20这样的组合并不是“巨大”数量的恕我直言，也是唯一合理的追索权。

Answer 2

2021 年 accessKeyLabel 现状

从 HTML 5 开始，我们就有了 accessKeyLabel 属性来读取浏览器分配的实际键盘快捷键。遗憾的是，browser support 仍然太低，无法依赖它，因为目前不仅缺少 IE 和 Edge，还缺少 Chrome。

Polyfill 助您一臂之力

我遇到了完全相同的问题，但需要不错的浏览器支持，所以我实现了一个小的 polyfill 来弥补差距。它尝试检测功能支持，如果没有找到，则添加一个小函数，该函数将根据用户代理返回正确的修饰键。

安装 polyfill（小于 1KB）：

npm i access-key-label-polyfill

激活：

import installAccessKeyLabelPolyfill from 'access-key-label-polyfill';
installAccessKeyLabelPolyfill();

在此处了解有关 polyfill 的更多信息：https://github.com/tillsanders/access-key-label-polyfill

用法

accessKeyLabel 属性的使用很简单，有和没有 polyfill。假设你有一个这样的按钮：

<button accesskey="d">Do crazy stuff</button>

您可以像这样获得实际的快捷方式：

const label = document.querySelector('#button').accessKeyLabel;

这可能会返回这样的字符串：

'⌃⌥d' // Chrome on macOS (only works with polyfill)
'⌃⌥d' // Safari on iOS (works without polyfill)
'Alt+Shift+d' // Firefox on Windows (works without polyfill)
'Alt+d' // Edge on Windows (only works with polyfill)

但请注意，如果浏览器不支持 accessKeyLabel（并且您没有使用 polyfill）或浏览器不支持 accessKey，您只会得到 {{ 1}}。