Próbuję utworzyć okno dialogowe, którego nie można zamknąć, naciskając klawisz ESC. Mój przypadek użycia polega na tym, że będę używać tego okna dialogowego, aby zachęcić użytkownika do ponownego zalogowania się przy próbie wykonania pewnych wrażliwych operacji.

Próbowałem następujących rzeczy, ale to nie działa: naciśnięcie ESC powoduje zamknięcie okna dialogowego, a ponadto odbiornik „keyup” nie jest nawet wprowadzony:

  <html>
  <body>
    <dialog id='dialog' >
      You shouldn't be able to dismiss me by pressing ESC - yet you can!
    </dialog>
    <script>
     var dialog = document.getElementById('dialog');
     dialog.addEventListener('keyup', function(e) {
       console.log('keyup '+e.keyCode);
       if (e.keyCode === 27) {
         e.preventDefault();
         e.stopPropagation();
       }
       });
     dialog.showModal();
    </script>
  </body>
</html>
1
Marcus Junius Brutus 2 kwiecień 2020, 22:23

3 odpowiedzi

Najlepsza odpowiedź

Należy dodać detektor zdarzeń do Body.

Zaktualizowano, by obsłużyć wycofany KeyCode

var dialog = document.getElementById('dialog');
var body = document.getElementById('body');

body.addEventListener('keydown', function(e) {
  var handled = false;
  if (e.key !== undefined && e.key === 27) {
    // Handle the event with KeyboardEvent.key and set handled true.
    handled=true;
  } else if (event.keyCode !== undefined && e.keyCode === 27) {
    // Handle the event with KeyboardEvent.keyCode and set handled true.
    handled=true;
  }

  if (handled) {
    // Suppress "double action" if event handled
    e.preventDefault();
    e.stopPropagation();
  }
});

dialog.showModal();
<html>
  <body id='body'>
    <dialog id='dialog' >
      You shouldn't be able to dismiss me by pressing ESC - yet you can!
    </dialog>
  </body>
</html>
2
Julio Ojeda 2 kwiecień 2020, 20:19

Zastąpić

dialog.addEventListener('keyup', ....)

Z

document.addEventListener('keydown', ...)

1
The Coprolal 2 kwiecień 2020, 19:34

Możesz po prostu wyłączyć wprowadzanie klawiatury.
Ale jedyny problem polega na tym, że blokuje wszystkie naciśnięcia klawiszy.

Możesz więc to zrobić:

<html>
  <body>
    <dialog id='dialog' >
      You shouldn't be able to dismiss me by pressing ESC - yet you can!
    </dialog>
    <script>
     document.onkeydown = function(e) {
       return false;
     }
      dialog.showModal();
    </script>
  </body>
</html>
0
MARSHMALLOW 2 kwiecień 2020, 19:52