Я загружаю динамический bootstrap modal и содержит несколько текстовых входов. Проблема, с которой я сталкиваюсь, что я хочу, чтобы курсор фокусировался на первом входе в этом модале, и по умолчанию это не происходит.
Поэтому я написал этот код, чтобы сделать это:
$('#modalContainer').on('show', function () {
$('input:text:visible:first').focus();
});
Но теперь он фокусируется на входе на мгновение, а затем автоматически уходит, почему это происходит и как решить?
@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();
})
Я нашел лучший способ сделать это без 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 автофокуса не влияет на модальность Bootstrap. Чтобы добиться такого же эффекта, используйте некоторые пользовательские JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
попробуйте этот код, он может сработать для вас
$(this).find('input:text')[0].focus();
Это простой код, который будет работать лучше всего на всех всплывающих окнах, которые имеют любое поле ввода с фокусировкой на него
$(".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')
Если вы хотите просто автофокусировать любой модальный, который был открыт, вы можете поместить в него шаблоны или функции lib, этот фрагмент, который будет сфокусирован на первом вводе:
$('.modal').on('shown.bs.modal', function () {
$(this).find('input:first').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();
});
});
$(document).ready(function() {
$("#button").click(function() {
$('#mymodal').on('shown.bs.modal', function() {
$('#myinput').focus();
})
});
});
Это "#button", который вызывает модальную форму,
"# mymodal" - модальная форма,
"# myinput" - это вход, который вы хотите получить.