javascript – What is the impact of changing the keypress event so that it interacts a 'level above' what the key would natively do?

Question:

A simple example, no code needed:

If I press CTRL + F , the browser automatically opens a search bar on the page.

I made it so that pressing CTRL + F it points to an input within the system.

I intend to put several other controllers, such as changing a boostrap tab with CTRL + TAB , closing a modal with ESC . open the internal help with F11 among others.

Examples:

To Navigate Between Tabs Using CTRL + SETA

  var change_tab = function () {
        var map = {37: false, 39: false, 17: false};
        $(document).keydown(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = true;
                if (map[37] && map[17]) {
                    var $el = $('.nav.nav-tabs').find('li');
                    $el.each(function () {
                        if ($(this).hasClass('active') === true) {
                            $(this).prev('li').find('a').trigger('click');
                        }
                    });
                }
                if (map[39] && map[17]) {
                    var $el = $('.nav.nav-tabs').find('li');
                    $el.each(function () {
                        if ($(this).hasClass('active') === true) {
                            $(this).next('li').find('a').trigger('click');
                        }
                    });
                }
            }
        }).keyup(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = false;
            }
        });
    }

To maximize a form with CTRL + F11 :

var make_full = function () {
        var map = {17: false, 122: false};
        $(document).keydown(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = true;
                if (map[17] && map[122]) {
                    $('.fullscreen').trigger('click');
                }
            }
        }).keyup(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = false;
            }
        });
    }

The question is simple:

Is this type of practice considered user friendly ?
Is there a problem replacing the browser's native hotkeys with the keys I want to interact with within my system (EX: CTRL + F to open the search)?
Is there any recommendation or standard (like PSR-4 for autoloading in PHP) on how to use this kind of functionality correctly?

PS: In the case in question, the target is an internal system, it is not something to be commercialized, I just need that whoever is going to use it, can do as many things in the shortest time as possible, since the focus of the system is precisely to streamline processes , here I have simple examples, but I have shortcuts that fill in dates, that trigger filters, request push notifications, and several other things, some are above native actions.

Answer:

As a rule, avoid changing the way the browser works so as not to incur accessibility problems later on. If your site's audience is restricted and particularly knowledgeable about the shortcuts, so be it, but what if the person is myopic and you've replaced ctrl++ with something else? Interfering with the functioning of browser shortcuts can cause setbacks for those who depend on them.

I believe that the path used by Google in applications like Gmail, with question mark for help overlay and shortcut combinations that don't run over those defined in browsers, is the safest way out in general.

An exception would be in the case of functionalities that replicate those already implemented by the browser: ctrl+f to use the application's internal search, ctrl+z to undo an interface change, etc. keep ctrl+z "original" when user is typing in a form field.

In this way, users who spend all day in your application will have shortcuts to make their lives easier without interfering with their browsing habits in other environments, maintaining the standardization of known combinations. Who doesn't hate the fact that every text editor on the planet has its specific shortcut to redo : ctrl+y , ctrl+shift+z , ctrl+r …

Some references…

Post Views: 4