Question

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

当页面加载时，焦点将转到表单中的第一个元素。
当在表单上按下按钮时，会出现一个模式以确认并且焦点应该在＆＃34;继续＆＃34;模态对话框内的按钮。

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

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。

打开时，将焦点设置为bootstrap模式内的按钮

1 个答案: