Получение модификаторов клавиатуры браузера + платформы

Question

Я создаю веб-приложение, которым нужно полностью управлять с клавиатуры. Я должен предоставить пользователю комбинацию клавиш доступа для разных кнопок, но способ доступа к ним отличается для каждого браузера и платформы. Например, для Chrome или Firefox в Ubuntu, если клавиша доступа «d», я должен нажать:

SHIFT+ALT+d

Но если я получаю доступ из Firefox 13 или старше, я должен использовать:

CTRL+d

Итак, способ активации ключа доступа зависит от браузера и его платформы .

Я хотел бы знать, есть ли способ автоматически определять, какой - эти модификаторы (SHIFT + ALT или CTRL), чтобы я мог правильно обновить инструкции для пользователей в соответствии с их платформой и браузером.

TIA!

Answer 1

Просто используйте 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>

Обратите внимание, что spe c не определяет формат для accessKeyLabel и содержит следующее note :

Браузеры на разных платформах будут отображать разные метки, даже для одной и той же комбинации клавиш, в зависимости от принятого на этой платформе соглашения. Например, если комбинацией клавиш является клавиша Control, клавиша Shift и буква C, браузер Windows может отображать «Ctrl + Shift + C», тогда как браузер Ma c может отображать «^ ⇧ C ", тогда как браузер Emacs может просто отображать" C - C ". Точно так же, если комбинация клавиш - это клавиша Alt и клавиша Escape, Windows может использовать «Alt + Es c», Ma c может использовать «⌥⎋», а браузер Emacs может использовать «M-ES. C "или" ES C ES C ".

Поэтому в общем случае неразумно пытаться проанализировать значение, возвращаемое IDL-атрибутом accessKeyLabel.

Answer 2

В итоге я расширил jquery и использовал платформу. 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- ключи-активаторы

Answer 3

Вы можете просто определить браузер и платформу, чем используя таблицу в ссылке в вашем вопросе. Это должно дать вам доступ к информации, которую вы ищете.

Другой вариант - избежать использования accesskey и использовать вместо него свойства altKey, ctrlKey и shiftKey для KeyboardEvent s и создайте свою собственную систему.