打开时将焦点设置为引导模式内的按钮答案

【问题标题】：Set focus to a button inside bootstrap modal when it opens打开时将焦点设置为引导模式内的按钮
【发布时间】：2016-07-14 12:30:57
【问题描述】：

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

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

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

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

【问题讨论】：

您能否确认show.bs.modal 事件是否按预期工作？
@Rohit416 是的。如果我在其中添加一个alert(); 方法，我可以看到警报。
在你的 focus() 执行后尝试查看哪个是活动元素，设置焦点后放置此行：console.log(document.activeElement);
上面写着：FOCUS: [object HTMLButtonElement]。
我的意思是，看起来不错，但是为什么我按ENTER 时它不提交？如果我从TAB 开始浏览，我可以看到它穿过孔模态 DIV。

标签： javascript jquery bootstrap-modal

【解决方案1】：

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

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

见Bootstrap modal reference。

【讨论】：

就是这样。谢谢！