Click a button on a modal, when the enter key is pressed, when the modal is shown

Question

I have a modal in my code named myModal . Only when the modal is shown on pressing the enter on my keyboard, I want a button on my modal to be clicked. I have the following code,

HTML

<div data-backdrop="static" data-keyboard="false" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"></div>
      <div class="modal-body">
        <table>                     
          <tr>
            <td>Username</td>
            <td style="padding:5px;">
              <input type="text" id="hostUsername" name="hostUsername" value="root" readonly="readonly">
            </td>
          </tr>    
          <tr>
            <td>Password</td>
            <td style="padding:5px;">
              <input type="password" id="hostPassword" name="hostPassword" value="KJFDKFGS">
            </td>
          </tr>
        </table>                    
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" onclick="uncheck_host()" >Close</button>
        <button type="button" class="btn btn-primary" id="getDataBt" onclick="getData()">Save changes</button>
      </div>
    </div>
  </div>
</div>  

JavaScript

$('#myModal').on('shown.bs.modal', function (event) {                  
  alert("BEFORE ENTER clicked");
  var keycode = (event.keyCode ? event.keyCode : event.which);
  if(keycode == '13'){
    alert("AFTER ENTER clicked");
    $('#getDataBt').click();   
  }     
});

Here the alert "BEFORE ENTER clicked" is alerted when the modal appears. But on pressing enter on the keyboard after the modal appears, the alert "AFTER ENTER clicked" is not alerted. I need some guidance on this.

Answer 1

You should do as follow :

$('#myModal').on('keypress', function (event) {
  alert("BEFORE ENTER clicked");
  var keycode = (event.keyCode ? event.keyCode : event.which);
  if(keycode == '13'){
    alert("AFTER ENTER clicked");
    $('#getDataBt').click();   
  }
});

or

$('#myModal').on('keyup', function (event) { ..... });

Answer 2

You need to check if the modal is open and enter key is pressed, simultaneously. Something like:

$(document).keypress(function(e) {
  if ($("#myModal").hasClass('in') && (e.keycode == 13 || e.which == 13)) {
    alert("Enter is pressed");
  }
});

Here's a fiddle

Answer 3

对于引导程序 4，使用 philantrovert 的解决方案，而不是hasClass('in')使用hasClass('show') 。