Как установить фокус на первый ввод текста в модальном окне начальной загрузки после показа

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

$('#modalContainer').on('show', function () {
   $('input:text:visible:first').focus();
});

Но теперь он на мгновение фокусируется на вводе, а затем автоматически исчезает, почему это происходит и как решить?

@scumah имеет для вас ответ: бутстрап Twitter - сосредоточьтесь на текстовой области внутри модального окна при нажатии

Для Bootstrap 2

modal.$el.on('shown', function () {
$('input:text:visible:first', this).focus();
});  

Обновление: для Bootstrap 3

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

========== Обновление ======

В ответ на вопрос вы можете использовать это с несколькими модальными окнами на одной странице, если вы укажете разные целевые данные, переименуете идентификаторы модальных окон, чтобы они соответствовали и обновили идентификаторы полей ввода формы, и, наконец, обновите свой JS для соответствия этим новым ID:
см. Http://jsfiddle.net/panchroma/owtqhpzr/5/

HTML

...
<button ... data-target="#myModal1"> ... </button> 
... 
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
... 

<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>

JS

$('#myModal1').on('shown.bs.modal', function() {
  $('#textareaID1').focus();
})

Я нашел лучший способ сделать это без jQuery.

<input value="" autofocus>

работает отлично.

Это атрибут html5. Поддерживается всеми основными браузерами.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Ответ Дэвида Тайароа правильный, но он не работает, потому что время «исчезновения» модального окна не позволяет вам сосредоточиться на вводе. Вам нужно создать задержку:

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

})

Обычный код (ниже) у меня не работает:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Я нашел решение :

$('body').on('shown.bs.modal', '#myModal', function () {
    $('input:visible:enabled:first', this).focus();
})

подробнее здесь

Я получил, что бутстрап добавил на свою страницу следующую информацию:

Из-за того, как HTML5 определяет свою семантику, атрибут HTML autofocus не действует в модальных окнах Bootstrap. Чтобы добиться того же эффекта, используйте собственный JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

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

Это простой код, который лучше всего подойдет вам для всех всплывающих окон с любым полем ввода с фокусировкой на нем.

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

Я думаю, что наиболее правильный ответ, предполагающий использование jQuery, - это объединение аспектов всех ответов на этой странице, а также использование события, которое проходит Bootstrap:

$(document).on('shown.bs.modal', function(e) {
  $('input:visible:enabled:first', e.target).focus();
});

Она также будет работать изменения $(document)в $('.modal')или добавить класс к модальным , что сигналы , что основное внимание должно произойти, как$('.modal.focus-on-first-input')

попробуйте этот код, он может сработать для вас

$(this).find('input:text')[0].focus();

Первый шаг, вы должны установить свой autofocusатрибут при вводе формы.

<input name="full_name" autofocus/>

И затем вам нужно добавить объявление, чтобы установить автофокус вашего ввода после отображения вашего модального окна.
Попробуйте этот код:

$(document).on('ready', function(){
    // Set modal form input to autofocus when autofocus attribute is set
    $('.modal').on('shown.bs.modal', function () {
        $(this).find($.attr('autofocus')).focus();
    });
});

Если вы хотите просто автоматически сфокусировать любое открытое модальное окно, вы можете добавить в свои шаблоны или функции библиотеки этот фрагмент, который будет фокусироваться на первом вводе:

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

Если вы ищете фрагмент, который будет работать для всех ваших модальных окон, и автоматически искать первый входной текст в открытом, вам следует использовать это:

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

Если ваш модальный файл загружается с использованием ajax, используйте вместо этого:

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

это самое общее решение

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});

• работает с модальными окнами, добавленными в DOM после загрузки страницы
• работает с вводом, текстовым полем, выбором, а не с кнопкой
• пропускает скрытый, отключенный, только для чтения
• работает с выцветшими модальными окнами, нет необходимости в setInterval

Попробуйте удалить свойство tabIndex модального окна , когда ваше поле ввода / текстовое поле открыто. Верните его к тому, что когда-либо было , когда вы закрываете ввод / текстовое поле. Это решит проблему независимо от версии начальной загрузки и без ущерба для взаимодействия с пользователем .

Согласно документам Bootstrap 4:

Из-за того, как HTML5 определяет свою семантику, атрибут HTML autofocus не действует в модальных окнах Bootstrap. Чтобы добиться того же эффекта, используйте собственный JavaScript.

Например:

$('#idOfMyModal').on('shown.bs.modal', function () {
    $('input:first').trigger('focus')
});

Ссылка .

Используйте автофокус для поиска нужного элемента формы:

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

$(document).ready(function() {
  $("#button").click(function() {
    $('#mymodal').on('shown.bs.modal', function() {
      $('#myinput').focus();
    })
  });
});

• "#Button" вызывает модальную форму,

• "#mymodal" - модальная форма,

• "#myinput" - это ввод, на котором вы хотите сфокусироваться