0

No meu sistema, criei um modal que vai servir de alerta sempre que o usuário fizer alguma operação inválida.

Mas para obrigar o usuário a sempre fechar o modal pelo botão close, eu queria evitar que ele feche o modal ao apertar a tecla ENTER. Tem alguma coisa que faz isso?

// Get the modal
var modal = document.getElementById('mensagem');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
.modal {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
<div id="mensagem" class="modal" style="display:block">
<input type="hidden" autofocus="true">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p><?=$mensagem;?></p>
  </div>
</div>

5
  • O seu modal só fecha se clicar no botão X.
    – user60252
    Commented 16/11/2018 às 16:01
  • Desculpe, mas não entendi. Você quer que não feche ao apertar enter? Mas, ele já não está fazendo isso? Ao meu ver, seria mais racional, possibilitar fechar com a tecla.... Commented 16/11/2018 às 16:04
  • Meu modal está fechando quando aperto Enter mas quero que isso não aconteça. Porque o usuário está viciado em apertar o enter em qualquer mensagem e não ler. Quero seja uma "desculpa a mais" pro usuário observar a mensagem antes de fechar. Além de que tenho que usar essa validação em inputs de código de barra no qual o enter é automático.
    – Bruno
    Commented 16/11/2018 às 16:28
  • No teste daqui quando aperta o Enter nada acontece. O que faz a modal fechar quando aperta o Enter?
    – Sam
    Commented 16/11/2018 às 18:42
  • Desculpe a demora pra responder. Realmente o modal não deveria fechar. Mas então reparei o seguinte. O campo que faz a validações está com autofocus e ele é utilizado para informar um código de barras. Então eu redireciono pra outra pagina para uma série de operações e depois usando um header eu volto pra mesma página e mostro o erro se existir uma S_SESSION. Ao voltar pra página o campo está com o focus e ao dar enter ele fecha o modal de erro e abre outro.
    – Bruno
    Commented 20/11/2018 às 10:50

2 Respostas 2

1

Voce poderia tentar aplicar ao span, o evento de teclado onkeypress e defini-lo para que quando houver um evento de teclado, nada aconteça.

Exemplo:

span.onkeypress = function() {
  modal.style.display = "none";
}
 

Ai um evento de teclado aciona a ação sobre o modal. Para evitar isso, você pode passar none para o evento. Ficaria assim:

span.onkeypress = "none";

Evitando assim qualquer evento de teclado sobre o span.

-1

Uma opação:

document.querySelector('.modal').addEventListener('keypress', function(evt) {
    if (evt.key) {
        evt.preventDefault();
    }
});

Mas pensando em acessibilidade isso é bem ruim porque uma pessoa que depende do leitor de tela pode não conseguir interagir com sua aplicação. Na verdade o ideal seria deixar a interação com teclado e pensar em usar um tabindex para ajudar o leitor de tela e usar um svg com title.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .