skróty klawiszowe w HTML

Question

cześć. mam pytanie czy da się w HTML ps tylko w HTML zrobić skrót klawiszowy do swojej strony jeśli się da to bym prosił albo przykład kodu albo po prostu jak bo chce zrobić na mojej stronie skrót klawiszowy ale nie chce mi się jak zwykle grzebać w js. za odpowiedzi Bendę wdzięczny

Comments

Proszę nie formatować bez powodu tekstu.

Answer 1

Jest coś takiego jak atrybut [accesskey].

Answer 2

A może jednak rozważysz zastosowanie js-a, przy "obsłudze" skrótów klawiszowych.  

W podanym przykładzie, naciśnięcie klawisza: lewyAlt, powoduje podświetlenie liter "skrótu klawiszowego" do menu i tak: Alt+G - wyświetla główną itd. (oczywiście można klikać w elementy menu)

<nav>
  <ul>
    <li title="Alt+G" tabindex="1">Główna</li>
    <li title="Alt+O" tabindex="2">Oferta</li>
    <li title="Alt+K" tabindex="3">Kontakt</li>
  </ul>
</nav>
<div class="tab-view" data-currentIndex="null"></div>

<template><!-- tab 1 -->
  <h1>Główna</h1>
  <p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</p>
</template>

<template><!-- tab 2 -->
  <h1>Oferta</h1>
  <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
  <ul>
    <li>At vero eos et accusamus et iusto odio</li>
    <li>Nam libero tempore, cum soluta nobis est</li>
    <li>Et harum quidem rerum facilis est et expedita distinctio</li>
  </ul>
</template>

<template><!-- tab 3 -->
  <form>
    <fieldset>
      <legend>Kontakt:</legend>
      <label for="f_full_name">Twoja nazwa:</label>
      <input type="text" id="f_full_name" name="f_full_name" value="Tomasz Wizytator" autofocus>
      <label for="f_email">Twój email:</label>
      <input type="email" id="f_email" name="f_email" value="t.visitor@visitor.com">
      <textarea name="message" rows="5" cols="30">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>      
      <input type="submit" value="Submit">
    </fieldset> 
  </form>
</template>

:root {
  --menu-first-letter: none;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  user-select: none;
}
nav li {
  display: inline-block;
  padding: 1em;
  cursor: pointer;
}
nav li:first-letter {
  text-decoration: var(--menu-first-letter);
}
.tab-view {
  margin: 1em;
  width: 90vw;
}
.tab-view form {
  width: 300px;
}
.tab-view form label, input { 
  display: block;
}
.tab-view form label, textarea { 
  margin: 0.5em 0;
}

const root = document.documentElement,
      menu_items = document.querySelectorAll('nav li'),
      tabs = document.querySelectorAll('template'),
      tab_viwe = document.querySelector('.tab-view');

window.focus();
window.onload = () => {
  menu_items[0].focus();
}

document.body.addEventListener('keydown', e => {
  //console.log(e.keyCode, e.code, e.which);
  //e.preventDefault(); 
  let index;
  
  if (e.altKey) { // 18 "AltLeft"
    const code = e.code || e.which || e.keyCode;
    switch(code) {
      case 71:
      case 'KeyG': // Alt + G
        index = 0;
        break;
      case 79:
      case 'KeyO': // Alt + O
        index = 1;
        break;
      case 75:
      case 'KeyK': // Alt + K
        index = 2;
        break;
    }
    
    showSelectedTab(index);
    root.style.setProperty('--menu-first-letter', 'underline');
  }
});

document.body.addEventListener('keyup', e => {
  e.preventDefault();
  if (!e.altKey) { // 18 "AltLeft"
    root.style.setProperty('--menu-first-letter', 'none');
  }
});

menu_items.forEach((item, index) => {
  item.addEventListener('click', () => {
    showSelectedTab(index);
  })
});

function showSelectedTab(index = null) {
  const current_index = tab_viwe.getAttribute('data-currentIndex');
  if (index != null && index != current_index) {
    tab_viwe.innerHTML = '';
    const clon = tabs[index].content.cloneNode(true);
    tab_viwe.appendChild(clon);
    tab_viwe.setAttribute('data-currentIndex', index);
    menu_items[index].focus();
  }  
}