0

在影子 DOM 中的元素中使用 accesskey 不会在 Firefox 中触发。

我在 MacOS 上测试了 Chrome 和 Safari，它按预期工作。keydown通过或事件侦听器手动映射键keyup似乎很复杂，因为键映射因浏览器和操作系统而异。

是否有任何解决方法或其他解决方案？

我创建了简单的小提琴：https ://jsfiddle.net/jk3mrx98/

class CustomElement extends HTMLElement {
    constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
        const customTextarea = document.createElement('textarea');
    customTextarea.accessKey = 'F';
    customTextarea.innerText = 'Accesskey F'
    shadowRoot.appendChild(customTextarea);
  }
}

window.customElements.define('custom-element', CustomElement);
<textarea accesskey="G">Accesskey G</textarea>
<custom-element></custom-element>

4

2 回答 2

0

很可能是 Firefox 88 中的一个错误，该错误在即将到来的 89 中修复。

似乎影子根目录中的 accesskey 永远不会在当前的 Firefox 稳定版本 (88) 中正确注册，并且 Alt+Shift+F 会在那里触发“文件”菜单。

但它似乎在即将发布的版本中得到修复：在 Windows 上的 Firefox Developer 89.b5（Aurora 发布通道）中尝试了你的小提琴，并且两个访问键都按预期工作：Alt+Shift+G 聚焦“本机”文本区域，Alt+Shift+F将 textarea 集中在自定义元素中。

于 2021-04-28T08:38:48.867 回答
0

没有答案。

只是展示了另一种编写构造函数的方式：

  • 你可以在调用之前编写 JS 代码super()，但是还没有 'this'
  • 你可以链接super()
      constructor() {
        const customTextarea = document.createElement('textarea');
        customTextarea.accessKey = 'F';
        customTextarea.innerText = 'Accesskey F';

        super() // sets and returns this scope
          .attachShadow({mode: 'open'}) // sets and returns this.shadowRoot
          .append(customTextarea);
      }
于 2021-04-28T08:57:02.313 回答