How to click a button on Enter key press

Question

I would like to click the following button on the pressing of the enter key. Note I do not have a text box to associate this with. This button is inside a modal and I would like for the modal to close on click of the OK button.

<div id="missing_fields_modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Error!</h4>
      </div>
      <div class="modal-body"><p>Please check all required fields</p>
      </div>
      <div class="modal-footer">
          <button type="button" id='missing_fields_ok_button' onkeyup="missing_fields_click" class="btn btn-primary" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

function missing_fields_click() {
            // Number 13 is the "Enter" key on the keyboard
            if (event.keyCode === 13) {
                // Cancel the default action, if needed
                event.preventDefault();
                // Trigger the button element with a click
                document.getElementById("missing_fields_ok_button").click();
            }
        }

I would like for the modal to close/click the OK button when the enter key is pressed.

Answer 1

Your main problem is you've assigned the keyup event listener to the button, so it will only fire if the button has focus. Add the keyup event listener to the document itself.

 function hideModal() { console.log("What ever you do to hide the modal"); } //Wire up button click document.getElementById("missing_fields_ok_button").addEventListener("click", hideModal); //Wire up even litener for keyup document.addEventListener("keyup", function(event) { console.log("Keyup"); //Check if modal is visible and key code if (document.getElementById("missing_fields_modal").offsetParent !== null && event.keyCode === 13) { //Programatically click the button document.getElementById("missing_fields_ok_button").click(); } }) /********************************************************* JQUERY VERSION //Wire up even litener for keyup $(document).on("keyup", function(event) { //Check if modal is visible and key code if ($("#missing_fields_modal")is(":visible") && event.keyCode === 13) { //Programatically click the button $("#missing_fields_ok_button").click(); } }) **********************************************************/ 

 <div id="missing_fields_modal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Error!</h4> </div> <div class="modal-body"> <p>Please check all required fields</p> </div> <div class="modal-footer"> <button type="button" id='missing_fields_ok_button' class="btn btn-primary" data-dismiss="modal">OK</button> </div> </div> </div> </div> 

Answer 2

Here's a little fun abstracted example of how to fire a click event on a button when the user hits enter.

 const btn = document.getElementById("btn"); btn.addEventListener("click", () => { console.log("I said don't click me"); }) document.addEventListener("keyup", (e) => { if (e.key === "Enter") { const event = new Event("click"); btn.dispatchEvent(event); } }) 

 <button id="btn">don't click me</button> 

Answer 3

Key events are usually bound to document. Call the BS .modal() method with option "hide" when event.which === 13 .

 $(document).on('keydown', dismissKey); function dismissKey(event) { if (event.which === 13) { event.preventDefault(); $('.modal').modal('hide'); } return false; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#error">Open Modal</button> <dialog id="error" class="modal fade" role="dialog"> <section class="modal-dialog modal-dialog-centered"> <article class="modal-content"> <header class="modal-header"> <h4 class="modal-title">Error!</h4> <button class="close" type="button" data-dismiss="modal">&times;</button> </header> <section class="modal-body"> <p>Please check all required fields</p> </section> <footer class="modal-footer"> <button class="btn btn-primary" type="button" data-dismiss="modal">OK</button> </footer> </article> </section> </dialog> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>