Início / coding / Perguntas / 79081864
Accepted
Andrus
Asked: 2024-10-13 04:28:05 +0800 CST

Como permitir que as teclas de seta para cima e para baixo envolvam o menu

  • 772

No menu do Bootstrap 5, pressionar a tecla de seta para cima no primeiro item ou a tecla de permissão para baixo no último item não faz nada.

Como fazer com que a seta para cima vá para o último item do menu se for pressionado no primeiro item e a seta para baixo vá para o primeiro item se for pressionado no último item, assim como nos menus normais de aplicativos de desktop do Windows?

Para reproduzir a página aberta

<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>

https://jsfiddle.net/b6or2s5e/

Abra o menu Ação. Pressionar a seta para cima na primeira linha do menu ou pressionar a seta para baixo na última linha do menu não faz nada.

javascript

1 respostas

  1. Best Answer

    Não há API para isso. Estou capturando o evento keydowne focando o primeiro/último visível .menu-item.

    addEventListener('keydown', function(ev) {

  const SELECTOR_VISIBLE_ITEMS = '.dropdown-item:not(.disabled):not(:disabled)'
  
  var elem = ev.target;
  var menu = elem.closest(".dropdown-menu")
  if (menu) {

    var visibleChildren = [...menu.querySelectorAll(SELECTOR_VISIBLE_ITEMS)]
    var length = visibleChildren.length;
    var index = visibleChildren.indexOf(elem);
    if (length) {
      var first = visibleChildren[0]
      var last = visibleChildren[length - 1]

      if (ev.key === 'ArrowDown' && index == length - 1) {
        first.focus();
        ev.preventDefault()
        ev.stopPropagation();
        return;
      }

      if (ev.key === 'ArrowUp' && index == 0) {
        last.focus();
        ev.preventDefault()
        ev.stopPropagation();
        return;
      }

    }
  }
  // must use capture = true
}, true)
    body {
  padding: 10px;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"></link>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- Example single danger button -->
<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>

    • 1

relate perguntas