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

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

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

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

Ответы

Ответ 1

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

Для Bootstrap 2

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

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

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

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

В ответ на вопрос вы можете использовать это с несколькими модалами на одной странице, если вы укажете разные целевые данные, переименуйте свои идентификаторы модалов, чтобы соответствовать и обновлять идентификаторы полей ввода формы, и, наконец, обновить свой JS до соответствуют этим новым идентификаторам:
см. 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();
})

Ответ 2

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

<input value="" autofocus>

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

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

Ответ 3

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

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

})

Ответ 4

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

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

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

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

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

Ответ 5

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

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

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

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

Первый шаг, вы должны установить свой атрибут 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();
    });
});

Ответ 11

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

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

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

  • "# myinput" - это вход, который вы хотите получить.