Как установить фокус для конкретного поля в модальном 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);
});
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();
})
просто хотел сказать, что Bootstrap 3 ручки это немного по-другому. Имя события " показано.bs.модальный".
$('#themodal').on('shown.bs.modal', function () {
$("#txtname").focus();
});
или поместите фокус на первый видимый вход следующим образом:
.modal('show').on('shown.bs.modal', function ()
{
$('input:visible:first').focus();
})
Я использую это в своем макете, чтобы захватить все модалы и сосредоточиться на первом входе
$('.modal').on('shown', function() {
$(this).find('input').focus();
});
У меня была та же проблема с bootstrap 3, фокус, когда я нажимаю ссылку, но не при запуске события с javascript. Решение:
$('#myModal').on('shown.bs.modal', function () {
setTimeout(function(){
$('#inputId').focus();
}, 100);
});
вероятно, это что-то об анимации!
у меня была проблема, чтобы поймать " показано.bs.модальное " событие.. И это мое решение, которое работает идеально..
вместо простого on ():
$('#modal').on 'shown.bs.modal', ->
использовать on () с делегированным элементом:
$('body').on 'shown.bs.modal', '#modal', ->
кажется, это потому, что модальная анимация включена (fade
в классе диалогового окна), после вызова .modal('show')
, диалог не сразу виден, поэтому он не может получить фокус в это время.
Я могу придумать два способа решения этой проблемы:
- удалить
fade
из класса, поэтому диалоговое окно сразу видно после вызова.modal('show')
. Вы можете видеть http://codebins.com/bin/4ldqp7x/4 для демонстрации. (Извините @keyur, я ошибочно отредактировал и сохранил как новый версия вашего примера) - вызов
focus()
наshown
событие, подобное тому, что написал @keyur.
Я создал динамический способ автоматического вызова каждого события. Он идеально подходит для фокусировки поля, потому что он вызывает событие только один раз, удаляя его после использования.
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();
});
таким образом, вы можете использовать тот же модальный загрузить то, что вы хотите, не беспокоясь об удалении событий каждый раз.
У меня была такая же проблема с bootstrap 3 и решена следующим образом:
$('#myModal').on('shown.bs.modal', function (e) {
$(this).find('input[type=text]:visible:first').focus();
})
$('#myModal').modal('show').trigger('shown');
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
})
Bootstrap модальное шоу событие
$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();
})
немного чище и более модульное решение может быть:
$(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();
});
});
надеюсь, что это поможет..