mmenu отключает табуляцию между элементами формы - PullRequest
Новая
       29

mmenu отключает табуляцию между элементами формы

1 голос
/ 02 апреля 2020

mmenu, когда открывается, не дает возможности использовать остальную часть страницы как обычно, особенно это касается вкладок между элементами формы и позволяет вам нажимать клавишу на элементе ввода или текстовой области и иметь повтор ключа (то есть aaaaaaaaaaaaaaa ).

По-видимому, это то, что встроено в mmenu, но это реальная проблема, поскольку мы используем его в постоянно открытом состоянии для настольных компьютеров и нуждаемся в этой функции.

Я не хочу изменить любое поведение элементов мультимедиа с максимальной шириной 899 пикселей (мобильные устройства), только рабочий стол (минимальная ширина 900 пикселей), который является первой частью сценария, начинающегося с if (mql.matches).

Мой текущий сценарий "Запусти меню": 

        <script>
function mediaqueryresponse(x) {
if (mql.matches)
             {
            document.addEventListener(
                "DOMContentLoaded", () => {
                   new Mmenu( "#navmenu", {
                       "openingInterval": 0,
                       "transitionDuration": 0,
                       wrappers: ["bootstrap"],
                       "extensions": [
                          "position-front",
                          "fx-panels-none",
                          "theme-dark"
                       ],
                       "offCanvas":
                          {
                          "blockUI": false,
                          "moveBackground": true
                          },
                       "sidebar": 
                          {
                          "expanded":
                              {
                              "use": true
                              }
                          },
                       "navbar": 
                          {
                                "title": "INTRANET"
                          },
                       "navbars": [
                          {
                             "position": "top",
                             "content": [
                                "prev",
                                "title"
                             ],
                          },
                          {
                             "position": "bottom",
                             "content": [
                                "<a class='fa fa-envelope' href='mailto:webmaster@example.com'></a>",
                                "<a class='fa fa-twitter' href='https://www.twitter.com/example'></a>",
                                "<a class='fa fa-facebook' href='fb://profile/6515649878645135'></a>"
                             ]
                          }
                       ]
                    });
                }
            );
}
else
             {
            document.addEventListener(
                "DOMContentLoaded", () => {
                    new Mmenu( "#navmenu", {
                       wrappers: ["bootstrap"],
                       "extensions": [
                          "position-front",
                          "pagedim-black",
                          "theme-dark"
                       ],
                       "navbar": 
                          {
                                "title": "INTRANET"
                          },
                       "navbars": [
                          {
                             "position": "top",
                             "content": [
                                "prev",
                                "title"
                             ],
                          },
                          {
                             "position": "bottom",
                             "content": [
                                "<a class='fa fa-envelope' href='mailto:webmaster@example.com'></a>",
                                "<a class='fa fa-twitter' href='https://www.twitter.com/example'></a>",
                                "<a class='fa fa-facebook' href='fb://profile/6515649878645135'></a>"
                             ]
                          }
                       ]
                    });
                }
            );
}
}
var mql = window.matchMedia("screen and (min-width: 900px) and (orientation:landscape)")
mediaqueryresponse(mql) // call listener function explicitly at run time
mql.addListener(mediaqueryresponse) // attach listener function to listen in on state changes
        </script>

1 Ответ

1 голос
/ 22 апреля 2020

Это, кажется, решило это для меня:

После вашего кода меню, который будет выглядеть примерно так: 

new Mmenu(document.querySelector("#menu"), {
 [...]
}

добавьте: 

document.body.removeEventListener('keydown', document.body.mmEventKeydownTabguard[0])

Это решение размещено здесь:

https://github.com/FrDH/mmenu-js/issues/86

...