Javascript-based async, promise, and await functions to control the time a popup is open

Asked

Viewed 62 times

1

I have the following problem: I have to display a popup to wait for the registration of a password by the user. I did so:

<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>

This popup only appears when the user clicks in the field of my form to enter the password.
How do I make this popup stay open while the user is not finished registering the password?
As soon as he finishes typing the password in the field, the popup has to close. I researched and saw that this has to do with async functions, Promise, etc. I even understood the concept a little bit, but I couldn’t implement it. Could someone please help me?

javascript html

  • Do you want to use Promisse to do this? Because you do not put a close button for the user to click when you finish filling the password?

  • so, because we don’t want this job to stay with the user, we want the popup to automatically close on the return of the function that evaluates whether the password was registered correctly. The function that does this evaluation is already done, but my popup does not "wait" this function to run; the popup "opens", the function that evaluates the password returns and, in the line below, I already close the popup. That is, the popup "opens", but closes soon after; so fast that it is not visible on the page :'(

  • Could enter in the question the code referring to the function that evaluates if the password has been filled?

  • 1

    The question is, how do you know that the user has finished typing? He does not press a Register/Confirm button?

  • So the process is actually more complex. My page calls a communication with a mobile device where the user actually enters the password. In the return that this device gives to me, is that I know if the password was registered correctly, so it is bad to understand and post code, even because this verification function is with another developer, who wrote the communication with the mobile device. But for example, let’s say the user, when leaving the field, triggers this verification function. How I close the popup only after this function runs?

1 answer

0

So Renan, it was not clear your question, because we do not know how is the function that checks the password input, but, to close the modal is very simple, if the password passes in the verification of said function, to close the modal just give a display:None in modal again:

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>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.