將焦點設置到引導模式內的按鈕時，它會打開

頁面加載時，焦點轉到表單的第一個元素。
當在窗體上按下按鈕時，模態似乎確認並且焦點應該位於模態對話框內的「繼續」按鈕上。

我設法讓第一個工作，但第二個我不知道爲什麼它不工作。以下是我的代碼。

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

來源

2016-07-14 Ev.

你能否確認'show.bs.modal'事件是否按預期工作？ – Rohit416

@ Rohit416是的。如果我在其中添加一個'alert（）;'方法，我可以看到警報。 –

嘗試查看焦點（）執行後哪個是活動元素，在設置焦點後放置此行：'console.log（document.activeElement）;' – Rohit416

您正在使用show.bs.modal其中，當模式即將顯示

我相信你需要shown.bs.modal事件發生時出現當模態完全顯示在wh時所有CSS轉換都已完成。

請參閱Bootstrap modal reference。

來源

2016-07-14 13:22:21 Rohit416

就是這樣。謝謝！ –

將焦點設置到引導模式內的按鈕時，它會打開

回答

相關問題