Início / coding / Perguntas / 78857077
Accepted
Andrus
Asked: 2024-08-11 05:24:25 +0800 CST

Como ativar o item do menu suspenso bootstrap pressionando a tecla do teclado

  • 772

A barra de navegação do Bootstrap 5 contém menus suspensos.
Os menus suspensos têm teclas de atalho sublinhadas como a, n, s, e:

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
    <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
    <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li>
  </ul>
</div>

Como ativar o item de menu se a tecla for pressionada no teclado? Por exemplo, se o menu suspenso estiver aberto, pressionar A deve agir como se o item do menu Ação fosse clicado.

jsfiddle: https://jsfiddle.net/b6or2s5e/

As setas esquerda e direita já são tratadas usando

Como usar as teclas de seta esquerda e direita para navegar na barra de navegação do bootstrap

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll('.dropdown').forEach(function (el) {
    el.addEventListener('shown.bs.dropdown', function () {
      document.addEventListener('keydown', function (e) {
        const click = new MouseEvent("click", {
          bubbles: true,
          cancelable: true,
          view: window,
        })
        if (e.key === "ArrowRight") {
          const o = getNextSibling(e.target.closest('.dropdown'), '.dropdown')
          if (!o) {
            document.querySelector('.dropdown-toggle').dispatchEvent(click)
          } else {
            o.querySelector('.Xdropdown-toggle').dispatchEvent(click)
          }
        } else if (e.key === "ArrowLeft") {
          const o = getPrevSibling(e.target.closest('.dropdown'), '.dropdown')
          if (!o) {
            const ar = document.querySelectorAll('.dropdown-toggle')
            ar[ar.length - 1].dispatchEvent(click)
          } else {
            o.querySelector('.dropdown-toggle').dispatchEvent(click)
          }
        }
      }, { once: true })
    })
  })
})

Como adicionar manipulação de teclas de atalho também?

javascript

1 respostas

  1. Best Answer

    Aqui está um snippet atualizado com uma abordagem dinâmica, obtendo os elementos sublinhados e usando um loop forEach sobre a lista de nós dos elementos sublinhados para comparar um evento na janela com cada elemento sublinhado para o qual textContent foi convertido e depois comparado. Se houver uma correspondência, executamos no elemento correspondente.keydown toLowerCase()click()

    A instrução switch switch pode ser removida e findUnderlined chamado para qualquer tecla se alt ou ctrl não for pressionado?

    Acredito que você esteja perguntando se pode adicionar teclas de controle e/ou alt , não tenho 100% de certeza de que sua pergunta está aqui, mas você pode adicionar qualquer condicional em termos do que deseja controlar com o pressionamento de tecla. Basta adicionar a lógica à condicional.

    Veja mais notas no trecho abaixo ...

    document.addEventListener("DOMContentLoaded", function() {
  // get drop-down menu
  const dropdownMenu = document.querySelector('.dropdown-menu');
  // get action button
  const action = document.querySelector('#dropdown-btn');
  // get the underlined elements as a nodelist
  const sections = dropdownMenu.querySelectorAll('li u');
  // helper function pass in underlined els and event key
  const setClickForUnderlinedEls = (els, key) => {
    // loop over underlined elements
    els.forEach(sec => {
      // conditional to compare the underlined 
      // elements text to lowercase
      if (key === sec.textContent.toLowerCase()) {
        // simulate a click on element
        sec.click()
      }
    });
  }
  // event click on action button to open dropdown
  action.addEventListener('click', (event) => {
    // window event on keydown to check key
    addEventListener('keydown', (e) => {
      // make sure the dropdown is expanded 
      // using aria-expanded attribute
      if (event.target.ariaExpanded !== 'false') {
        // run helper function to compare the key and
        // the underlined elements textContent
        setClickForUnderlinedEls(sections, e.key);
      }
    });
  })
});


    document.addEventListener("DOMContentLoaded", function() {
  const dropdownMenu = document.querySelector('.dropdown-menu');
  const action = document.querySelector('#dropdown-btn');
  const sections = dropdownMenu.querySelectorAll('li u');
  const setClickForUnderlinedEls = (els, key) => {
    els.forEach(sec => {
      if (key === sec.textContent.toLowerCase()) {
        sec.click()
      }
    });
  }
  action.addEventListener('click', (event) => {
    addEventListener('keydown', (e) => {
      if (event.target.ariaExpanded !== 'false') {
        setClickForUnderlinedEls(sections, e.key);
      }
    });
  })
});
    #vertical-space,
#section1,
#section2,
#section3,
#section4,
#section5{
  height: 100vh;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<!-- Example single danger button -->
<div class="btn-group" id="top">
  <!--/ Added the id dropdown-btn for this example /-->
  <button id="dropdown-btn" type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#section1"><u>A</u>ction</a></li>
    <li><a class="dropdown-item" href="#section2">A<u>n</u>other action</a></li>
    <li><a class="dropdown-item" href="#section3"><u>W</u>e have a link</a></li>
    <li><a class="dropdown-item" href="#section4"><u>S</u>omething else here</a></li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="#section5">S<u>e</u>parated link</a></li>
  </ul>
</div>
<!--/ added purely for example /-->
<div id="vertical-space">
</div>
<div id="section1">
  <p>
    You pressed the <strong>a</strong> button and instantiated a click on the <em>Action</em> button. <a href="#top">Back to top</a>
  </p>
  
</div>
<div id="section2">
  <p>
    You pressed the <strong>n</strong> button and instantiated a click on the <em>Another action</em> button. <a href="#top">Back to top</a>
  </p>
</div>
<div id="section3">
  <p>
    You pressed the <strong>w</strong> button and instantiated a click on the <em>We have a link</em> button. <a href="#top">Back to top</a>
  </p>
</div>
<div id="section4">
  <p>
    You pressed the <strong>s</strong> button and instantiated a click on the <em>Something else here</em> button. <a href="#top">Back to top</a>
  </p>
</div>
<div id="section5">
  <p>
    You pressed the <strong>e</strong> button and instantiated a click on the <em>Separate link</em> button. <a href="#top">Back to top</a>
  </p>
</div>

    • 1

relate perguntas