1

estou com o seguinte problema: tenho que exibir uma popup para aguardar o cadastro de uma senha pelo usuário. Fiz assim:

<div id="modalSenha" style="display: none;">
   <!-- Modal content -->
   <div class="modal-content">
      Digitação de Senha
      <span class="close">&times;</span>
      <br/>
      <br/>
      <ul class="nav">
         <li>
            <div class="w3-section">
               <label style="font-size: 16px; font-weight: bold;">Por favor, digite a senha...</label>
            </div>
         </li>
      </ul>
   </div>

</div>

Essa popup somente aparece quando o usuário clica no campo do meu formulário para colocar a senha.
Como faço para que essa popup fique aberta enquanto o usuário não termina de cadastrar a senha?
Assim que ele terminar de digitar a senha no campo, a popup tem que fechar. Pesquisei e vi que isso tem a ver com funções async, Promise, etc. Até entendi um pouco o conceito, mas não consegui implementar. Alguém poderia por favor me ajudar?

5
  • O loco quer usar Promisse pra fazer isso? Pq não coloca um botão de fechar pro usuário clicar quando terminar de preencher a senha?
    – LeAndrade
    Commented 1/11/2019 às 14:08
  • então, porque não queremos que esse trabalho fique com o usuário, queremos que a popup feche automaticamente no retorno da função que avalia se a senha foi cadastrada corretamente. A função que faz essa avaliação já está feita, mas a minha popup não "espera" essa função executar; a popup "abre", a função que avalia a senha retorna e, na linha debaixo, eu já fecho a popup. Ou seja, a popup "abre", mas fecha logo em seguida; tão rápido que nem fica visível na página :'(
    – Renan
    Commented 1/11/2019 às 14:14
  • Poderia inserir na pergunta o código referente a função que avalia se a senha foi preenchida?
    – LeAndrade
    Commented 1/11/2019 às 15:05
  • 1
    A questão é, como você sabe que o usuário terminou de digitar? Ele não aperta um botão Cadastrar/Confirmar? Commented 1/11/2019 às 17:05
  • Então, é que na verdade, o processo é mais complexo. A minha página chama uma comunicação com um dispositivo móvel onde o usuário digita a senha de fato. No retorno que esse dispositivo dá pra mim, é que sei se a senha foi cadastrada corretamente, por isso, é meio ruim de entender e de postar código, até porque essa função de verificação está com outro desenvolvedor, que escreveu a comunicação com o dispositivo móvel. Mas para efeito de exemplo, digamos que o usuário, ao sair do campo, acione essa função de verificação. Como eu fecho a popup somente após essa função executar?
    – Renan
    Commented 1/11/2019 às 18:01

1 Resposta 1

0

Então Renan, não ficou clara sua pergunta, pois não sabemos como é a função que verifica o input da senha, mas, para fechar o modal é muito simples, se a senha passar na verificação da dita função, para fechar o modal basta dar um display:none no modal novamente:

function Senha() {
  var modal = document.getElementById('modalSenha');
  var senha = document.getElementById('senha');
  
  modal.style.display = 'block';
  
  senha.onkeyup = function() {
    if(senha.value.length == 6) {
      modal.style = modal.style.display = 'none';
      senha.value = '';
    }
  }
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-container" style="margin-top:30px">
  <button class="w3-button w3-blue" onclick="Senha()">Inserir senha</button>

  <div id="modalSenha" class="w3-modal" style="display:none">
    <div class="w3-modal-content">
      Digitação de Senha
      <br>
      <br>
      <label>Senha</label>
      <input type="password" id="senha">
      <br>
      <br>
    </div>
  </div>
</div>

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 .