將焦點設置在模態框中的輸入字段上

Question

我試圖將焦點設置為模態框中的輸入字段，但我無法使其工作。

這是我嘗試過的代碼：

// MODAL BOX
$(function() {
    $('a[rel*=leanModal]').leanModal({ top : 100, closeButton: ".modal_close" }).find("#first-focus").focus();      
});

和

// MODAL BOX
$(function() {
    $('a[rel*=leanModal]').leanModal({ top : 100, closeButton: ".modal_close" }).find("input:text:visible:first").focus();      
});

關於我可以嘗試更多的建議嗎？

Answer 1

嘗試通過id直接訪問元素：

$("#first-focus").focus();

希望這可以幫助。

Answer 2

您正在使用正確的方法setFocus（）。

它工作得很好看到這個JSFiddle

這意味着你可能錯過了正確的選擇器。 對於第一個標簽， first-focus是一個id，所以可以直接調用$('#first-focus').setFocus();

您為codepen提供的鏈接正在執行setFocus()方法，該方法不是由jQuery定義的。 jQuery方法是focus() 。 除此之外，此方法僅被調用一次。 應該在單擊“ Open鏈接時調用它。

你的代碼現在變成了

// MODAL BOX
$(function() {
  $('a[rel*=leanModal]').leanModal({
    top: 100,
    closeButton: ".modal_close"
  }).click(function () {
    $('#first-focus').focus();
    console.log($("#first-focus").length);
  });
});

這是一個工作的codepen鏈接

最好將focus()調用為leanModal回調，但是我無法在文檔或源代碼中找到這樣的回調。

Answer 3

試着做

$("a[rel*=leanModal]").on('click', function(){
  $(this).leanModal();
  $("#first-focus").focus(); 
})