javascript - 打开时将焦点设置到引导模式内的按钮

Question

我正在努力实现以下目标:

1. 当页面加载时，焦点转到表单中的第一个元素。
2. 当在表单上按下按钮时，会出现一个模态以进行确认，焦点应位于模态对话框内的“继续”按钮上。

我设法使第一个工作正常，但第二个我不知道为什么它不工作。以下是我的代码。

HTML

<form method="post" {% if action %} action="{{ action }}" {% endif %} role="form" enctype="multipart/form-data">
<!-- Modal -->
  <div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Confirmation</h4>
        </div>
        <div class="modal-body">
           {{ confirm | default: "Would you like to proceed?" }}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" id="submit-main-form" class="btn btn-primary">
              <i class="fa fa-save"></i> {{ submit_text | default: "Proceed" }}
          </button>
        </div>
      </div>
    </div>
  </div>

</form>

脚本

/* Sets focus on the first element of the form */
$(document).ready(function() {

    $('form:first *:input[type!=hidden]:first').focus();

    $("#confirmationModal").on('show.bs.modal', function(event) {
        // not setting focus to submit button
        $("#submit-main-form").focus();
    });
});

Answer 1

您正在使用 show.bs.modal，它在模式即将显示时发生

我相信您需要 shown.bs.modal 事件，该事件在所有 CSS 转换完成时模式完全显示时发生。

参见 Bootstrap modal reference .