如何将访问密钥附加到 HTML 元素

【问题标题】：How do I attach an access key to a HTML element如何将访问密钥附加到 HTML 元素
【发布时间】：2022-01-14 06:39:03
【问题描述】：

我尝试使用accesskey 属性，但它要求用户使用组合键，但我想使用单个键来访问元素。我试图在网上搜索它，但找不到任何东西。

【问题讨论】：

只能使用 Javascript。
你能告诉我怎么做吗
访问是什么意思？喜欢聚焦元素？你试过 onkeypress JavaScript 事件吗？
通过访问我的意思是激活并且 onKeypress 不起作用，我必须将特定键分配给特定元素
激活accesskey的方式取决于here提到的浏览器和它的平台，你不能像那里提到的那样单键激活accesskey

标签： javascript html css

【解决方案1】：

你可以在 Javascript 的帮助下做到这一点但你真的不应该因为本地可用的访问键需要一个修饰符有很好的理由。

请注意，这实际上不允许将分配给 accesskeys 的键用于访问这些元素以外的任何其他操作（例如，您不能再在输入中键入这些字母），这就是为什么这不是可接受的解决方案。

我只是展示它来演示一般的技术方法。

document.addEventListener('keypress', function(event) {
  const target = document.querySelector(`[data-accesskey=${event.key.toLowerCase()}]`);
  if (target) {
    target.focus();
    event.preventDefault();
  }
})

<input type="text" data-accesskey="n" placeholder="Press n to focus this field" />
<button type="button" data-accesskey="p">Press p to focus this button</button>

【讨论】：