顯示模態后，jquery不專注於輸入

Question

因此，在我的頁面上，我有以下jQuery代碼，重點關注每個模式的最近輸入：

$(document).ready(function(){
  $(".modal").on('shown.bs.modal', function() {
    $(this).closest("[autofocus]:first").focus();
  });
});

第一次打開模態時，這種方法效果很好。 但是，當我單擊模態並重新打開它時，它不會像我期望的那樣專注於最近的輸入。

這是我的模態代碼：

<a href="" data-toggle="modal" data-target="#new_section">New Section</a>
            <div class="modal fade item-plus" id="new_section" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Add menu section</h4>
                  </div>
                  <div class="modal-body">
                    <h5 class="menu-section-title">
                      <%= label_tag :title %>
                      <br>
                      <%= text_field_tag :title, nil, :placeholder => "e.g. Appetizers", :class => "input-lg", autofocus: "autofocus" %>
                      <p class="error" id= "menu-section-title-errors"></p>
                      <br>
                    </h5>
                    <%= link_to_add_association "Add", f, :menu_sections, "data-dismiss" => "modal", :class => "add-section btn btn-primary", disabled: true %>
                  </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->

Answer 1

默認情況下，div，p和許多其他元素不集中

您應該添加tabindex，也許請嘗試此操作

$(this).closest("[autofocus]:first").attr("tabindex","-1").focus();

但請檢查是否多數民眾贊成