Question

我想按Enter键单击以下按钮。注意我没有文本框与此关联。此按钮位于模态内部，我希望单击“确定”按钮后即可关闭模态。

<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();
            }
        }

我希望模式可以在按下Enter键时关闭/单击“确定”按钮。

Answer 1

您的主要问题是您已将keyup事件侦听器分配给按钮，因此仅在按钮具有焦点时才会触发。将keyup事件侦听器添加到文档本身。

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

这是一个有趣的抽象示例，该示例演示了如何在用户按下Enter键时触发按钮上的click事件。

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

键事件通常绑定到文档。 event.which === 13时呼叫BS .modal() method with option "hide"。

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

如何单击Enter键上的按钮

3 个答案: