Ignore open modal enter key

Asked

Viewed 221 times

2

On my system, I created a modal that will serve as an alert whenever the user does any invalid operation.

But to force the user to always close the modal by the close button, I wanted to prevent it to close the modal by pressing the button ENTER. There’s something that does that?

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

javascript html css

  • Your modal only closes if you click the X button.

  • I’m sorry, but I don’t get it. Do you want it not to close when you press enter? But, is it not doing this anymore? In my view, it would be more rational, to make it possible to close with the key....

  • My modal is closing when I press Enter but I want it not to happen. Because the user is addicted to pressing enter on any message and not reading. I want to be an "excuse too much" for the user to observe the message before closing. Plus I have to use this validation on barcode inputs where enter is automatic.

  • In the test here when you press Enter nothing happens. What makes the modal close when you press Enter?

  • Sorry for the delay in answering. Really the modal should not close. But then I noticed the following. The field that makes the validations is with autofocus and it is used to inform a barcode. Then I redirect to another page for a series of operations and then using a header I go back to the same page and show the error if there is a S_SESSION. When returning to the page the field is with Focus and give enter it closes the error modal and opens another.

1 answer

0

You could try, if I’m not mistaken, to apply the 'span' keyboard event 'onkeypress' and set it so that when there is a keyboard event, nothing happens. Example:

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

Then a keyboard event triggers the action on the modal. To avoid this, you can pass 'None' to the event. Would look like this:

span.onkeypress = none;

thus avoiding any keyboard event on the 'span'.

Browser other questions tagged javascript html css

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