Question

我的代码中有一个名为myModal的模态。只有在按下键盘上的enter时显示模态时，我才需要点击我的模态上的按钮。我有以下代码，

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

此处出现模式时会提醒警报"BEFORE ENTER clicked"。但是在模式出现后按键盘上的输入时，警报"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) { ..... });

Answer 3

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

当按下回车键时，单击模态上的按钮，显示模态时

3 个答案: