6

我正在创建一个应该完全通过键盘操作的 Web 应用程序。我必须为用户提供不同按钮的访问键组合，但每个浏览器和平台访问它们的方式是不同的。例如对于 Ubuntu 中的 Chrome 或 Firefox，如果访问键是“d”，我必须按：

SHIFT+ALT+d

但如果我从 Firefox 13 或更早版本访问，我必须使用：

CTRL+d

因此，激活 accesskey 的方式取决于浏览器及其平台。

我想知道是否有一种方法可以自动检测这些修饰符（SHIFT+ALT 或 CTRL），以便我可以根据用户的平台和浏览器正确更新用户的说明。

蒂亚！

4

3 回答 3

2

只需使用accessKeyLabel：

const btn = document.getElementById("btn"),
keyCombParagraph = document.getElementById("key-comb");

{
  const label = btn.accessKeyLabel;
  keyCombParagraph.innerHTML = label ?
    `This button can be activated by pressing ${label}.` :
    `This button doesn't have an assigned access key.`;
}

btn.addEventListener("click", () => {
  alert("Hello.");
});
<button id="btn" accesskey="h">Hello</button>
<p id="key-comb"></p>

请注意，规范没有定义格式accessKeyLabel并包含以下注释：

不同平台上的浏览器将根据该平台上流行的约定显示不同的标签，即使对于相同的组合键也是如此。例如，如果组合键是 Control 键、Shift 键和字母 C，Windows 浏览器可能会显示“Ctrl+Shift+C”，而 Mac 浏览器可能会显示“^⇧C”，而 Emacs 浏览器可能会显示可能只显示“CC”。同样，如果组合键是 Alt 键和 Escape 键，Windows 可能使用“Alt+Esc”，Mac 可能使用“⌥⎋”，Emacs 浏览器可能使用“M-ESC”或“ESC ESC”。

因此，一般来说，尝试解析从 accessKeyLabel IDL 属性返回的值是不明智的。

于 2020-07-18T20:21:36.150 回答
0

您可以简单地检测浏览器和平台，而不是使用问题链接中的表格。这应该可以让您访问您正在寻找的信息。

另一种选择可能是避免使用accesskey和使用 s 的altKey,ctrlKey和shiftKey属性KeyboardEvent并构建您自己的系统。

于 2020-07-11T23:11:24.317 回答
0

我最终扩展了 jquery 并使用了 platform.js：

(function ( $ ) {

    // Requires https://github.com/bestiejs/platform.js/blob/master/platform.js
    // Uses info https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey 

    class KMPlatform{
      constructor(p){this.platform = p}
        getAccessKeyActivators(){}
    }
    
    class KMLinux extends KMPlatform{
        getAccessKeyActivators(){
        if(platform.name == 'Chrome' || platform.name == 'Firefox')
            return ['alt','shift'];
        if(platform.name.startsWith('Opera'))
            return ['alt'];
        return [];
      }
    }
    
    class KMMac extends KMPlatform{
        getAccessKeyActivators(){
        if(platform.name == 'Chrome' || platform.name == 'Firefox' || platform.name.startsWith('Opera'))
            return ['ctrl','alt'];
        return [];
      }
    }
    
    class KMWindows extends KMPlatform{
        getAccessKeyActivators(){
        if(platform.name == 'Chrome' || platform.name == 'Firefox')
            return ['alt','shift'];
        if(platform.name == 'IE' || platform.name.startsWith('Opera'))
            return ['alt'];
        return [];
      }
    }

    $.extend({
       getAccessKeyActivators: function(){
           if(platform.os.family == 'Linux')
                return (new KMLinux(platform)).getAccessKeyActivators();
            else if (platform.os.family.startsWith('Mac'))
                return (new KMMac(platform)).getAccessKeyActivators();
            else if (platform.os.family.startsWith('Windows'))
                return (new KMWindows(platform)).getAccessKeyActivators();
            else return [];
       }
    });
}( jQuery ));

回购https://github.com/gbosetti/browser-access-keys-activators npm 包https://www.npmjs.com/package/@gbosetti/access-keys-activators

于 2020-07-19T18:20:18.403 回答