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.

Solution 1

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

Solution 2

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) { ..... });

Solution 3

For bootstrap 4, use philantrovert's solution but instead of hasClass('in') use hasClass('show').

Comments

[Vugar Suleymanov]

shown.bs.modal this is bootstrap modal event triggered when modal is shown. That is why your alert("BEFORE ENTER clicked"); alerted when modal appears.