javascripthtmljqueryaccess-keys

Getting the browser+platform keyboard modifiers


I am creating a Web app that should be completely operated through the keyboard. I must provide the user the accesskey combination for different buttons, but the way accessing them is different for each browser and platform. E.g. For Chrome or Firefox in Ubuntu, if the accesskey is "d", I must press:

SHIFT+ALT+d

But if I access from Firefox 13 or older, I must use:

CTRL+d

So,the way to activate the accesskey depends on the browser and its platform.

I would like to know if there is a way to automatically detect which are those modifiers (SHIFT+ALT or CTRL) so I can properly update the instructions for the users according to their platform and browser.

TIA!


Solution

  • I ended up extending jquery and using 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 ));
    

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