如何設置Bootstrap模態中特定字段的焦點，一旦出現

Question

我已經看到有關自舉模態的幾個問題，但沒有一個完全像這樣，所以我會繼續。

我有打電話的onclick像這樣一個模式...

$(".modal-link").click(function(event){ 
    $("#modal-content").modal('show'); 
}); 

這工作得很好，但當我拿出我想要合焦的第一輸入元件的模式......在可區分的第一個輸入元素的ID爲#photo_name。

所以，我想

$(".modal-link").click(function(event){ 
    $("#modal-content").modal('show'); 
    $("input#photo_name").focus(); 
    }); 

但這無濟於事。最後，我嘗試綁定'show'事件，但即便如此，輸入也不會集中。最後只是爲了測試，因爲我有一個suspiscion這是關於js加載順序，我把一個setTimeout只是爲了看看我是否延遲了一秒，焦點工作，是的，它的工作原理！但這種方法顯然是廢話。有沒有一些方法可以在不使用setTimeout的情況下獲得如下效果？

$("#modal-content").on('show', function(event){ 
    window.setTimeout(function(){ 
     $(event.currentTarget).find('input#photo_name').first().focus() 
    }, 0500); 
    }); 

Answer 1

試試這個

這裏是老DEMO：

編輯： （下面是一個自舉3和jQuery 1.8.3工作DEMO）

$(document).ready(function() { 
    $('#modal-content').modal('show'); 
    $('#modal-content').on('shown', function() { 
     $("#txtname").focus(); 
    }) 
}); 

啓動引導程序3需要使用shown.bs.modal事件：

$('#modal-content').on('shown.bs.modal', function() { 
    $("#txtname").focus(); 
}) 

Answer 2

看來，這是因爲模式的動畫已啓用（類對話框的fade），調用.modal('show')後，對話框不是立即可見，因此它不能在這個時候獲得焦點。

我能想到的兩種方法來解決這個問題：

1. 卸下類fade，所以對話是調用.modal('show')後立即可見。您可以在演示中看到http://codebins.com/bin/4ldqp7x/4。 （對不起@keyur，我錯誤地編輯並保存爲您的示例的新版本）
2. 致電focus()在shown事件，如@keyur寫了什麼。

Answer 3

我在我的佈局以此來捕獲所有情態動詞，並專注於第一輸入

$('.modal').on('shown', function() { 
    $(this).find('input').focus(); 
    }); 

Answer 4

一點更清潔，更模塊化的解決方案可能是：

$(document).ready(function(){ 
    $('.modal').success(function() { 
     $('input:text:visible:first').focus(); 
    }); 
}); 

或使用ID爲例：

$(document).ready(function(){ 
    $('#modal-content').modal('show').success(function() { 
     $('input:text:visible:first').focus(); 
    }); 
}); 

Hope這有助於..

Answer 5

只是想說Bootstrap 3處理這個有點不同。活動名稱是「shown.bs.modal」。

$('#themodal').on('shown.bs.modal', function() { 
    $("#txtname").focus(); 
}); 

或把重點放在第一個可見的輸入是這樣的：

.modal('show').on('shown.bs.modal', function() 
{ 
    $('input:visible:first').focus(); 
}) 

http://getbootstrap.com/javascript/#modals

Answer 6

我曾與引導3同樣的問題，解決這樣的：

$('#myModal').on('shown.bs.modal', function (e) { 
    $(this).find('input[type=text]:visible:first').focus(); 
}) 

$('#myModal').modal('show').trigger('shown'); 

Answer 7

我有與自舉3相同的問題，重點是當我點擊鏈接，但不是當t用javascript來裝配事件。 解決方案：

$('#myModal').on('shown.bs.modal', function() { 
    setTimeout(function(){ 
     $('#inputId').focus(); 
    }, 100); 
}); 

可能它是關於動畫的東西！

Answer 8

我有問題趕上 「shown.bs.modal」 事件。而這是我的解決方案，它可以完美運行..

上（）代替簡單：

$('#modal').on 'shown.bs.modal', -> 

上使用（）與委託元素：

$('body').on 'shown.bs.modal', '#modal', -> 

Answer 9

我創建了一個動態的方式來自動調用每個事件。它非常適合集中一個領域，因爲它只需調用一次該事件，並在使用後將其刪除。

function modalEvents() { 
    var modal = $('#modal'); 
    var events = ['show', 'shown', 'hide', 'hidden']; 

    $(events).each(function (index, event) { 
     modal.on(event + '.bs.modal', function (e) { 
      var callback = modal.data(event + '-callback'); 
      if (typeof callback != 'undefined') { 
       callback.call(); 
       modal.removeData(event + '-callback'); 
      } 
     }); 
    }); 
} 

你只需要在文件準備好時打電話modalEvents()。

用途：

$('#modal').data('show-callback', function() { 
    $("input#photo_name").focus(); 
}); 

所以，你可以使用相同的模式來加載你想要的東西，而不擔心刪除事件每次。

Answer 10

Bootstrap添加了一個加載事件。

https://getbootstrap.com/docs/3.3/javascript/#modals

捕獲的模態的 'loaded.bs.modal' 事件

$('#mymodal').on('loaded.bs.modal', function(e) { 
    // do cool stuff here all day… no need to change bootstrap 
}) 

Answer 11

引導模式顯示事件

$('#modal-content').on('show.bs.modal', function() { 
$("#txtname").focus(); 

}）