Форум Сайтостроение Веб-строительство

Отслеживание нажатие shift+tab

R
На сайте с 01.12.2012
Offline
86
Radrigo
185
Всем привет.

Есть примерно такое меню на сайте
<ul>




    
           <li><a href="#">Раздел</a></li>
           <li class="menu-drop__sp"><a href="#">Раздел</a>
              <ul>
                 <li><a href="#">Подраздел</a></li>
                 <li><a href="#">Подраздел</a></li>
                 <li><a href="#">Подраздел</a></li>
                 <li><a href="#">Подраздел</a></li>
                 <li><a href="#">Подраздел</a></li>
              </ul>
           </li>
           <li class="menu-drop__sp"><a href="#">Раздел</a>
              <ul><li><a href="#">Подраздел</a></li>
                 <li><a href="#">Подраздел</a></li>
                 <li><a href="#">Подраздел</a></li>
                 <li><a href="#">Подраздел</a></li>
                 <li><a href="#">Подраздел</a></li>
              </ul>
           </li>
        </ul>
Какое-то время назад сделан скрип, чтобы при табуляции по ссылке, где где есть подменю, добавлялся класс, чтобы меню оставалось открытым при дальнейшей табуляции. Когда последняя ссылка в подменю теряет фокус, то это класс удаляется.
$(document).ready(function () {
        $('.menu-drop__sp > a').focus(
                function () {
                        $(this).parents('.menu-drop__sp').addClass('focus-menu');
                }
        );
        $('.menu-drop__sp ul li:last-child a').focusout(
                function () {
                        $(this).parents('.menu-drop__sp').removeClass('focus-menu');
                }
        )
        $('.menu-drop__sp > a').hover(
                function () {
                        $('.menu-drop__sp').removeClass('focus-menu');
                }
        );
        $(document).click(
                function (e) {
                        if (!$('.menu-drop__sp ul a').is(e.target)) {
                                $('.menu-drop__sp').removeClass('focus-menu');
                        };
                }
        );
});

Данный код работает нормально только в том случае, если пользователь переходит только при помощи tab. Если же например на последней ссылке в подменю пользователь захочет перейти на предыдущую ссылку при помощью shift+tab, то подменю закроется, так как последняя ссылка теряет фокус.

То же самое и с ссылкой, где есть подменю. При нажатии shift+tab меню остаётся открытым, что неправильно.

Не могу сообразить как сделать, чтобы когда последняя ссылка теряет фокус, при этом фокус приобретает предыдущая ссылка, то класс не удалялся бы. Тоже самое и с ссылкой, где есть подменю. Если она теряет фокус, а следующая ссылка не приобретает фокус, то класс удалялся бы.

Может как-то можно отслеживать нажатие клавиш shift+tab.

Буду очень признателен, если кто-нибудь подскажет, как это реализовать.

Алеандр
На сайте с 08.12.2010
Offline
207
Алеандр
#1
Radrigo :
Может как-то можно отслеживать нажатие клавиш shift+tab.

Гугл предлагает варианты:

if(event.shiftKey && event.keyCode == 9) { 
  // shift was down when tab was pressed
} 

if (e.shiftKey && e.key === 'Tab') {
        // Do whatever, like e.target.previousElementSibling.focus();
}

R
На сайте с 01.12.2012
Offline
86
Radrigo
#2

Получилось реализовать переход с последней ссылки при помощи shift+tab, чтобы подменю не закрывалось, таким образом.

$(document).ready(function () {
        $('.menu-drop__sp > a').focus(
                function () {
                        $(this).parents('.menu-drop__sp').addClass('focus-menu');
                }
        );
        /////////
        document.addEventListener('keydown', function (e) {
                let isTabPressed = (e.key == 'Tab' || e.keyCode == 9);
                if (e.shiftKey && isTabPressed) {
                        $('.menu-drop__sp ul li:last-child a').blur(
                                function () {
                                        $(this).parents('.menu-drop__sp').addClass('focus-menu');
                                }
                        );
                } else {
                        $('.menu-drop__sp ul li:last-child a').blur(
                                function () {
                                        $(this).parents('.menu-drop__sp').removeClass('focus-menu');
                                }
                        );
                }
        });
        //////////
        $('.menu-drop__sp > a').hover(
                function () {
                        $('.menu-drop__sp').removeClass('focus-menu');
                }
        );
        $(document).click(
                function (e) {
                        if (!$('.menu-drop__sp ul a').is(e.target)) {
                                $('.menu-drop__sp').removeClass('focus-menu');
                        };
                }
        );
});

Не могу понять, почему не работает такой вариант. Мне ведь по сути не надо добавлять класс, только удалить, если на последней ссылке в подменю нажимается только tab без shift

$(document).ready(function () {
        $('.menu-drop__sp > a').focus(
                function () {
                        $(this).parents('.menu-drop__sp').addClass('focus-menu');
                }
        );
        /////////
        document.addEventListener('keydown', function (e) {
                let isTabPressed = (e.key == 'Tab' || e.keyCode == 9);
                if (!e.shiftKey && isTabPressed) {
                        $('.menu-drop__sp ul li:last-child a').blur(
                                function () {
                                        $(this).parents('.menu-drop__sp').removeClass('focus-menu');
                                }
                        );
                }
        });
        //////////
        $('.menu-drop__sp > a').hover(
                function () {
                        $('.menu-drop__sp').removeClass('focus-menu');
                }
        );
        $(document).click(
                function (e) {
                        if (!$('.menu-drop__sp ul a').is(e.target)) {
                                $('.menu-drop__sp').removeClass('focus-menu');
                        };
                }
        );
});

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий