モーダルが表示されているときに、モダルのボタンをクリックします。

Question

私のコードにmyModalという名前のモーダルがあります。モーダルがキーボードのenterを押して表示されている場合のみ、モーダルのボタンをクリックします。私は、次のコード、モーダルが表示されたら、

<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はここでは、アラート"BEFORE ENTER clicked"

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

が警告される

HTMLを持っています。しかし、モーダルが表示された後にキーボードのEnterキーを押すと、警告"AFTER ENTER clicked"はアラートされません。私はこれに関するいくつかのガイダンスが必要です。

Answer 1

モーダルが開いていて、同時にエンターキーが押されているかどうかを確認する必要があります。ような何か：

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

ここでは、次のように行う必要がありますfiddle

Answer 2

です：

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

または

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