Выбирать выбор диалога Материала Десигн Лите с клавиатурой

Я тестирую этот пример диалогового окна с материалом design тяжба:

var dialog = document.querySelector('dialog');
var showModalButton = document.querySelector('.show-modal');
if (! dialog.showModal) {
  dialogPolyfill.registerDialog(dialog);
}
showModalButton.addEventListener('click', function() {
  dialog.showModal();
});
dialog.querySelector('.close').addEventListener('click', function() {
  dialog.close();
});






  

Allow this site to collect usage data to improve your experience?

Пример ясный и оно я функционирует хорошо; однако: как я могу выбирать выбор используя стрелы адреса клавиатуры? Потому что до сих пор я только могу использовать мышь.

4
задан 14.03.2016, 03:50
2 ответа

То, что ты можешь делать, так это, открыв диалог, выбрав первую кнопку и добавив драйвер keyup что изменил выбор, если пользователь нажимает наверху (keyCode 38) или внизу (keyCode 40). Поскольку у тебя только есть две кнопки, не имеет значение действительно кнопка.

Было бы возможно делать многими различными способами. Здесь я оставляю пример, из как ты мог бы делать это:

  • Используй признаки data-* чтобы приносить контроль какой кнопки он будет активным в каждом моменте.
  • Добавь драйвер для keydown что incrementará/decrementará стоимость признака data- корреспондент согласно нажатой кнопке.
  • Помести фокус в активную кнопку используя focus().

И код для этого, основанного на коде вопроса:

var dialog = document.querySelector('dialog');
var showModalButton = document.querySelector('.show-modal');
if (! dialog.showModal) {
  dialogPolyfill.registerDialog(dialog);
}
showModalButton.addEventListener('click', function() {
  dialog.showModal();

  // después de mostrar el modal, seleccionamos el primer botón por defecto
  // y añadimos información sobre los botones y el botón seleccionado en los atributos data
  dialog.dataset.activeButton = 0; // botón seleccionado, el primero
  dialog.dataset.numButtons = dialog.querySelectorAll(".mdl-button").length; // número de botones en el diálogo
  dialog.querySelector(".mdl-button").focus();

});
dialog.querySelector('.close').addEventListener('click', function() {
  dialog.close();
});

// controladores para cuando se pulse una tecla
window.addEventListener('keyup', function(e) {

  // si el modal está abierto y se pulsó la tecla de arriba o abajo
  if (dialog.hasAttribute("open") && (e.keyCode == 38 || e.keyCode == 40)) {
    if (e.keyCode == 38) {
      // si se pulsó abajo, decrementamos en una unidad el botón seleccionado (o lo ponemos al máximo número de botones si estaba al principio
      dialog.dataset.activeButton = parseInt(dialog.dataset.activeButton) > 0 ?  (parseInt(dialog.dataset.activeButton) - 1) % dialog.dataset.numButtons : dialog.dataset.numButtons - 1;
    } else {
      // si se pulsó arriba, incrementamos en una unidad el botón seleccionado
      dialog.dataset.activeButton = (parseInt(dialog.dataset.activeButton) + 1) % dialog.dataset.numButtons;
    }
    // ponemos el foco en el botón que corresponde (nota: nth-child empieza en 1 y no en 0)
    dialog.querySelector(".mdl-button:nth-child(" + (parseInt(dialog.dataset.activeButton)+1) + ")").focus();
  }

});
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.2/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.2/material.min.js"></script>

<button type="button" class="mdl-button show-modal">Show Modal</button>
<dialog class="mdl-dialog">
  <div class="mdl-dialog__content">
    <p>
      Allow this site to collect usage data to improve your experience?
    </p>
  </div>
  <div class="mdl-dialog__actions mdl-dialog__actions--full-width">
    <button type="button" class="mdl-button">Agree</button>
    <button type="button" class="mdl-button">Maybe</button>
    <button type="button" class="mdl-button close">Disagree</button>
  </div>
</dialog>

Как сделан драйвер он будет крутить кнопки кругового способа (если он прибудет в конце, он начинает с другого конца), и пользователь только был бы должен нажимать enter, чтобы выполнять активную кнопку. Было бы возможно меняться для того, чтобы, если бы он прибыл на конец, он останавливался.

1
ответ дан 24.11.2019, 14:44

После того, как - элементы <button> ты можешь переходить с одного сайта на другой используя клавишу Tab , чтобы продвигаться или Shift + Tab , чтобы отступать, но если ты хочешь использовать стрелы, podrГ-схвати добавлять что-то как это:

var buttons = document.querySelectorAll('.mdl-dialog__actions .mdl-button');
var currentIndex = 0;
document.addEventListener('keydown', function(e) {
    if (e.keyCode == 40) {
        buttons[currentIndex++].focus();
    }

    if (e.keyCode == 38) {
        buttons[currentIndex--].focus();
    }

    if (currentIndex >= buttons.length) {
        currentIndex = 0;
    }

    if (currentIndex < 0) {
        currentIndex = buttons.length - 1;
    }
});

AsГ - получают кнопки, на которых ты хочешь перейти с одного сайта на другой и делаешь следующему focus , когда ты нажимаешь наверху или внизу. keyCode для каждой стрелы:

  • 37 Левые
  • 38 Достигни
  • 39 Прямые
  • 40 Внизу
1
ответ дан 24.11.2019, 14:44