CODEWITHSUNDEEP
javascriptjquerymodal-dialogbootstrap-modal
nidHi
nidHi

Reputation: 833

Simulate a button click event when the enter key is pressed (during an opened modal)

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.

Upvotes: 4

Views: 23134

Answers (3)

JuliaJ
JuliaJ

Reputation: 97

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

Upvotes: 1

Vugar Suleymanov
Vugar Suleymanov

Reputation: 317

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

Upvotes: 7

philantrovert
philantrovert

Reputation: 10092

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

Upvotes: 6

Related Questions