Używam ładunku jQuery (), aby dodać modalny, który zawiera formularz. Wszelkie próby skupienia się na pierwszym polu nie powiodły się. Mój kod wygląda tak:

Plik foo.html zawiera:

<div id='standardModal' class='modal fade' role='dialog'>
    <div class='modal-dialog'>
        <div class='modal-content'>
            <div id='standardModalBody' class='modal-body'>
                <form id='addRecord'>
                    <div class='form-group' id='intTypeD'>
                        <label for='intType'>Type</label>
                        <input type='text' class='form-control' id='intType'>
                        <small id='intTypeM' class='text-danger'></small>
                    </div>
                </form>
        </div>
    </div>
</div>

Moje połączenia JavaScript:

$('#screens').load('foo.html', function() {
  $.getJSON('addRecord_initialize.php', function (result) {
     ...
  }.always(function () {
     $('#standardModal').modal('show');
  });
});

Nie próbowałem dodać

$('#addRecord input:text, #addRecord textarea').first().focus();

Lub

$('#intType').focus();

Oba prawo do początku funkcji wywoływanej po zakończeniu obciążenia, a po modalnym ("Pokaż") - ale wszystkie 4 warianty nie wydają się mieć żadnego efektu.

0
Herbert Pfeifer 3 czerwiec 2018, 19:01

4 odpowiedzi

Najlepsza odpowiedź

Twoje modalne wymaga pewnego czasu, aby otworzyć, a przeglądarka potrzebuje trochę czasu na reflowanie, zwłaszcza gdy istnieje przejście. Można więc ustawić ostrość po pewnym czasie, używając prostego setTimeout lub - nawet lepiej - za pomocą zdarzeń dostarczanych przez wtyczkę modalną.

W twoim .always - zakładając, że używasz modalności Bootstrap (jeśli nie, proszę, proszę określić inaczej):

$('#standardModal').on('shown.bs.modal', function () {
  $('#intType').trigger('focus')
}) 

Ponadto, oto odniesienie: https://getbootstrap.com/docs/4.0/components/ Modal /.

Ze względu na to, jak HTML5 definiuje semantykę, atrybut autofokusa HTML nie ma wpływu w modę Bootstrap. Aby osiągnąć ten sam efekt, użyj niestandardowego javascript.

Jeśli tak się nie zadziała, powinieneś zmienić strategię: zachować na swojej stronie głównej, Kuff pusty modal, a następnie wypełnij tylko treść div za pomocą żądania AJAX. W ten sposób będziesz mieć narzędzia obsługi imprez i wszystkie inne rzeczy wtyczki zawsze dostępne na swojej stronie głównej.

0
deblocker 3 czerwiec 2018, 16:47

Nie ma potrzeby używania jQuery tutaj, możesz po prostu użyć HTML.

<input type='text' class='form-control' id='intType' autofocus>
0
pau 3 czerwiec 2018, 16:11

Twój kod wydaje się być w porządku.

$(document).ready(function() {
  $('#addRecord input:text, #addRecord textarea').first().focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='standardModal' class='modal fade' role='dialog'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div id='standardModalBody' class='modal-body'>
        <form id='addRecord'>
          <div class='form-group' id='intTypeD'>
            <label for='intType'>Type</label>
            <input type='text' class='form-control' id='intType'>
            <small id='intTypeM' class='text-danger'></small>
          </div>
        </form>
      </div>
    </div>
  </div>
0
sns 3 czerwiec 2018, 16:12

Dzięki faceci, to działało:

$('#standardModal').on('shown.bs.modal', function () {
  $('#intType').trigger('focus')
}) 

Dziwne, myślałem, że przykryłem ten możliwy problem, czekając w debuggerze, ale oczywiście nie jest to samo.

Autofokus ma problem z większością przeglądarek, dlatego zacząłem korzystać z opcji jQuery.

Jeszcze raz dziękuję, przypadek zamknięty.

0
Herbert Pfeifer 4 czerwiec 2018, 16:39