获取浏览器+平台键盘修饰符

Question

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

SHIFT+ALT+d

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

CTRL+d

所以，the way to activate the accesskey depends on the browser and its platform。

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

TIA！

Answer 1

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

另一种选择是避免使用 accesskey，而是使用 KeyboardEvent 的 altKey、ctrlKey 和 shiftKey 属性，并构建您自己的属性系统.

Answer 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>

请注意 spec does not define a format for accessKeyLabel and contains the following note:

Browsers on different platforms will show different labels, even for the same key combination, based on the convention prevalent on that platform. For example, if the key combination is the Control key, the Shift key, and the letter C, a Windows browser might display "Ctrl+Shift+C", whereas a Mac browser might display "^⇧C", while an Emacs browser might just display "C-C". Similarly, if the key combination is the Alt key and the Escape key, Windows might use "Alt+Esc", Mac might use "⌥⎋", and an Emacs browser might use "M-ESC" or "ESC ESC".

In general, therefore, it is unwise to attempt to parse the value returned from the accessKeyLabel IDL attribute.

Answer 3

我最终扩展了 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

获取浏览器+平台键盘修饰符

Getting the browser+platform keyboard modifiers

html

javascript

jquery

access-keys