Как установить фокус для конкретного поля в модальном Bootstrap, как только он появится

Я видел пару вопросов в отношении модалов bootstrap, но ни один из них не похож на этот, поэтому я продолжу.

у меня есть модальный, который я называю onclick так... 

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

это работает нормально, но когда я показываю модальный, я хочу сосредоточиться на первом входном элементе... В мае первый входной элемент имеет идентификатор #photo_name.

поэтому я попытался

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

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

11 ответов

попробуй такое

вот старая демо:

EDIT: (Вот рабочий демо С Bootstrap 3 и jQuery 1.8.3)

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

запуск bootstrap 3 необходимо использовать показано.bs.модальное событие:

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

просто хотел сказать, что Bootstrap 3 ручки это немного по-другому. Имя события " показано.bs.модальный".

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

или поместите фокус на первый видимый вход следующим образом:

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

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

75

Я использую это в своем макете, чтобы захватить все модалы и сосредоточиться на первом входе 

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

У меня была та же проблема с bootstrap 3, фокус, когда я нажимаю ссылку, но не при запуске события с javascript. Решение:

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

вероятно, это что-то об анимации!

9

у меня была проблема, чтобы поймать " показано.bs.модальное " событие.. И это мое решение, которое работает идеально..

вместо простого on ():

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

использовать on () с делегированным элементом:

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

кажется, это потому, что модальная анимация включена (fade в классе диалогового окна), после вызова .modal('show'), диалог не сразу виден, поэтому он не может получить фокус в это время.

Я могу придумать два способа решения этой проблемы:

  1. удалить fade из класса, поэтому диалоговое окно сразу видно после вызова .modal('show'). Вы можете видеть http://codebins.com/bin/4ldqp7x/4 для демонстрации. (Извините @keyur, я ошибочно отредактировал и сохранил как новый версия вашего примера)
  2. вызов focus() на shown событие, подобное тому, что написал @keyur.
6

Я создал динамический способ автоматического вызова каждого события. Он идеально подходит для фокусировки поля, потому что он вызывает событие только один раз, удаляя его после использования.

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

таким образом, вы можете использовать тот же модальный загрузить то, что вы хотите, не беспокоясь об удалении событий каждый раз.

3

У меня была такая же проблема с bootstrap 3 и решена следующим образом:

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

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

Bootstrap добавил загруженное событие.

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

захват " загружен.bs.модальное ' событие на модальном

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

Bootstrap модальное шоу событие

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

})

0

немного чище и более модульное решение может быть:

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

надеюсь, что это поможет..

-1