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

Question

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

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

Поэтому я написал этот код, чтобы сделать это:

$('#modalContainer').on('show', function () {

   $('input:text:visible:first').focus();

});

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

639 11

jQuery twitter-bootstrap

11 ответов:

Comments

Ничего не найдено.

David Taiaroa · Accepted Answer · 2017-05-23 15:10:48

@scumah имеет ответ для вас:Twitter bootstrap-фокус на 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> 
... 

<div class="modal fade" id="myModal1" ...>
... 

<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>
JS
$('#myModal1').on('shown.bs.modal', function() {
  $('#textareaID1').focus();
})

timothymarois · Accepted Answer · 2014-06-28 05:12:19

Я нашел лучший способ сделать это, без jQuery.
<input value="" autofocus>
работает отлично.

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

Marcos Furquim · Accepted Answer · 2015-11-20 21:12:45

ответ Дэвида Тайароа правильный, но не работает, потому что время "затухания" модального не позволяет вам сосредоточиться на вводе. Вам нужно создать задержку:
$('#myModal').on('shown.bs.modal', function () {
    ...
    setTimeout(function (){
        $('#textareaID').focus();
    }, 1000);

})

Éderson T. Szlachta · Accepted Answer · 2017-01-05 10:50:49

обычный код (ниже) не работать на меня:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
нашел решение:
$('body').on('shown.bs.modal', '#myModal', function () {
    $('input:visible:enabled:first', this).focus();
})
посмотреть подробнее здесь

Amr Elgarhy · Accepted Answer · 2015-03-31 17:33:42

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

из-за того, как HTML5 определяет свою семантику, атрибут HTML autofocus не имеет никакого эффекта в Bootstrap модальности. Для достижения такого же эффекта, используйте некоторые пользовательские JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
http://getbootstrap.com/javascript/#modals

Jitesh Tukadiya · Accepted Answer · 2013-03-06 15:12:40

попробуйте этот код, он может работать для вас
$(this).find('input:text')[0].focus();

Junaid Anwar · Accepted Answer · 2016-06-04 23:43:53

Это простой код, который будет работать для вас лучше всего на всех всплывающих окон, которые имеют любое поле ввода с фокусировкой его
$(".modal").on('shown.bs.modal', function () {
    $(this).find("input:visible:first").focus();
});

Phil Hodgson · Accepted Answer · 2017-01-24 18:05:41

Я думаю, что наиболее правильным ответом, предполагающим использование jQuery, является консолидация аспектов всех ответов на этой странице, а также использование события, которое проходит Bootstrap:
$(document).on('shown.bs.modal', function(e) {
  $('input:visible:enabled:first', e.target).focus();
});
Он также будет работать изменение $(document) to $('.modal') или добавить класс к модальному, который сигнализирует, что этот фокус должен произойти, например $('.modal.focus-on-first-input')

Gabriel Rodrigues · Accepted Answer · 2016-04-20 15:12:38

Если вы хотите просто автофокус любой модальный, который был открыт, вы можете поместить в вас шаблоны или функции lib этот фрагмент, который будет сосредоточен на первом входе:
$('.modal').on('shown.bs.modal', function () {
  $(this).find('input:first').focus();
})

Fendi Septiawan · Accepted Answer · 2017-11-02 06:22:41

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

Jenrry Leguia · Accepted Answer · 2017-12-10 21:09:13

$(document).ready(function() {
  $("#button").click(function() {
    $('#mymodal').on('shown.bs.modal', function() {
      $('#myinput').focus();
    })
  });
});
Это" # кнопка", которая вызывает модальную форму,

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

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