Як встановити фокус на перше введення тексту в режимі завантажувальної програми після відображення

Я завантажую динамічний завантажувальний модуль, і він містить мало тексту. Проблема, з якою я стикаюся, що хочу, щоб курсор зосередився на першому введенні в цьому модалі, і це не відбувається за замовчуванням.
Тому я написав цей код, щоб це зробити:

$('#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()
})

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();
    });
});

Якщо ви хочете просто автофокусувати будь-який відкритий модал, ви можете вкласти у вас шаблони або функції lib цього фрагмента, який зосередиться на першому введенні:

$('.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-атрибут автофокусування не впливає в режимах Bootstrap. Щоб домогтися такого ж ефекту, використовуйте якийсь спеціальний JavaScript.

Наприклад:

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

Link .

Використовуйте автофокус для пошуку потрібного елемента форми:

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

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

• Саме "# кнопка" викликає модальну форму,

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

• "#myinput" - це вхід, на який ви хочете отримати фокус