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.

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.

• javascript
• jquery
• modal-dialog
• bootstrap-modal

3 Answers 3

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

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

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