Jak ustawić fokus na pierwsze wprowadzenie tekstu w trybie ładowania początkowego po wyświetleniu

Ładuję dynamiczny modal bootstrap i zawiera kilka danych wejściowych. Problem, z którym się spotykam, polega na tym, że chcę, aby kursor koncentrował się na pierwszym wejściu w tym trybie, a to nie dzieje się domyślnie.
Więc napisałem ten kod, aby to zrobić:

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

Ale teraz skupia się przez chwilę na wejściu, a następnie znika automatycznie, dlaczego tak się dzieje i jak rozwiązać?

@scumah ma dla Ciebie odpowiedź: Twitter bootstrap - skup się na textarea wewnątrz modalu po kliknięciu

Dla Bootstrap 2

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

Aktualizacja: dla Bootstrap 3

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

========== Aktualizacja ======

W odpowiedzi na pytanie możesz użyć tego z wieloma modałami na tej samej stronie, jeśli określisz różne cele danych, zmienisz nazwy identyfikatorów modali, aby pasowały i zaktualizowały identyfikatory pól wejściowych formularza, a na koniec zaktualizujesz JS, aby pasował do tych nowych Identyfikatory:
patrz 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();
})

Znalazłem najlepszy sposób na zrobienie tego bez jQuery.

<input value="" autofocus>

działa świetnie.

To jest atrybut HTML5. Obsługiwane przez wszystkie główne przeglądarki.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Odpowiedź Davida Taiaroa jest poprawna, ale nie działa, ponieważ czas na "zanikanie" modalu nie pozwala skupić się na wejściu. Musisz utworzyć opóźnienie:

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

})

Zwykły kod (poniżej) nie działa dla mnie:

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

Znalazłem rozwiązanie :

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

zobacz więcej tutaj

Mam, że bootstrap dodał następujące informacje na swojej stronie:

Ze względu na to, jak HTML5 definiuje swoją semantykę, atrybut autofocus HTML nie ma wpływu na modały Bootstrap. Aby osiągnąć ten sam efekt, użyj niestandardowego JavaScript:

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

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

To jest prosty kod, który będzie działał najlepiej we wszystkich wyskakujących okienkach, które mają dowolne pole wejściowe z fokusem

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

Myślę, że najbardziej poprawną odpowiedzią, zakładając użycie jQuery, jest konsolidacja aspektów wszystkich odpowiedzi na tej stronie, plus użycie zdarzenia, które przechodzi Bootstrap:

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

To również będzie działać zmienia $(document)się $('.modal')lub dodać klasę do modalnym, że powinno nastąpić to nacisk sygnały, jak$('.modal.focus-on-first-input')

wypróbuj ten kod, może zadziałać dla Ciebie

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

Najpierw musisz ustawić swój autofocusatrybut w formularzu.

<input name="full_name" autofocus/>

A potem musisz dodać deklarację, aby ustawić autofokus twojego wejścia po wyświetleniu twojego modalu.
Wypróbuj ten kod:

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

Jeśli chcesz po prostu automatycznie ustawić ostrość dowolnego otwartego modalu, możesz umieścić w sobie wzorce lub funkcje lib ten fragment, który skupi się na pierwszym wejściu:

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

jeśli szukasz fragmentu, który działałby dla wszystkich twoich modali, i automatycznie wyszukujesz pierwszy tekst wejściowy w otwartym, powinieneś użyć tego:

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

Jeśli twój modal jest ładowany przy użyciu Ajax, użyj tego zamiast tego:

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

jest to najbardziej ogólne rozwiązanie

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});

• działa z modami dodanymi do DOM po załadowaniu strony
• działa z wejściem, obszarem tekstu, zaznaczaniem, a nie przyciskiem
• pomija ukryte, wyłączone, tylko do odczytu
• działa z wyblakłymi modami, nie ma potrzeby ustawiania setInterval

Spróbuj usunąć właściwość tabIndex modalu , gdy twoje pole wejściowe / tekstowe jest otwarte. Po zamknięciu pola wprowadzania / pola tekstowego ustaw go z powrotem na to, co kiedykolwiek było . To rozwiązałoby problem niezależnie od wersji bootstrap i bez uszczerbku dla przepływu doświadczenia użytkownika .

Według dokumentacji Bootstrap 4:

Ze względu na to, jak HTML5 definiuje swoją semantykę, atrybut autofocus HTML nie ma wpływu na modały Bootstrap. Aby osiągnąć ten sam efekt, użyj niestandardowego JavaScript.

Na przykład:

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

Link .

Użyj autofokusa, aby wyszukać odpowiedni element formularza:

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

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

• To „#button” wywołuje formularz modalny,

• „#mymodal” to forma modalna,

• „#myinput” to wejście, na którym chcesz się skupić