alexalannunes · October 12, 2020 12:20
diff --git a/menu-item-keydown.html b/menu-item-keydown.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul {
        padding: 10px 0;
        margin: 0;
        list-style: none;
        border: 1px solid #ccc;
        border-radius: 8px;
        position: absolute;
      }
      li {
        padding: 5px 12px;
        cursor: pointer;
        transition: all 0.2s linear;
      }
      li.selected,
      li:hover,
      li:focus,
      li:active {
        background: #08c;
        color: #ffffff;
      }
      * {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
    </style>
  </head>
  <body>
    <ul id="list">
      <li tabindex="1">Item 1</li>
      <li tabindex="2">Item 2</li>
      <li tabindex="3">Item 3</li>
      <li tabindex="4">Item 4</li>
    </ul>

    <script>
      const ul = document.querySelector("#list");
      let li_selected;
      let index = -1;
      const KEYDOWN = 40;
      const KEYUP = 38;
      const SELECTED = "selected";

      document.addEventListener("keydown", _keydown, false);

      function _keydown(event) {
        const len = ul.getElementsByTagName("li").length - 1;

        if (event.keyCode === KEYDOWN) {
          if (li_selected) {
            // incrementa index pra selecionar o item zero
            index++;
            removeSelectedClass(li_selected);
            const next = ul.getElementsByTagName("li")[index];

            if (index <= len) {
              li_selected = next;
            } else {
              index = 0;
              li_selected = ul.getElementsByTagName("li")[0];
            }

            addSelectedClass(li_selected);
          } else {
            index = 0;
            li_selected = getItems()[0];
            addSelectedClass(li_selected);
          }
        } else if (event.keyCode === KEYUP) {
          if (li_selected) {
            removeSelectedClass(li_selected);
            index--;
            const next = getItems()[index];
            if (typeof next !== undefined && index >= 0) {
              li_selected = next;
            } else {
              index = len;
              li_selected = getItems()[len];
            }

            addSelectedClass(li_selected);
          } else {
            index = len;
            li_selected = getItems()[len];
            addSelectedClass(li_selected);
          }
        }
      }

      function getItems() {
        return ul.getElementsByTagName("li");
      }

      function addSelectedClass(elem) {
        elem.classList.add(SELECTED);
        elem.focus();
      }
      function removeSelectedClass(elem) {
        elem.classList.remove(SELECTED);
      }
    </script>
  </body>
 </html>
No results found