Не могу сфокусироваться с помощью jQuery load () с модальным - PullRequest
Новая
       23

Не могу сфокусироваться с помощью jQuery load () с модальным

0 голосов
/ 03 июня 2018

Я использую jQuery load (), чтобы добавить модал, содержащий форму.Любые попытки сфокусироваться на первом поле потерпели неудачу.Мой код выглядит так:

Файл foo.html содержит: 

<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>

Мои вызовы JavaScript: 

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

Нет, я пытался добавить 

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

или 

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

как справа от начала функции, которая вызывается при завершении загрузки, так и после модального ('show') - но все 4 варианта не кажутсяиметь какой-либо эффект.

Ответы [ 4 ]

0 голосов
/ 04 июня 2018

Спасибо, ребята, это сработало: 

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

Странно, я думал, что смог решить эту возможную проблему, ожидая в отладчике, но, очевидно, это не то же самое.

Автофокус имеетпроблема в большинстве браузеров, поэтому я начал использовать опцию jQuery.

Еще раз спасибо, дело закрыто.

0 голосов
/ 03 июня 2018

Ваш код работает нормально. 

$(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 голосов
/ 03 июня 2018

Вашему модалу нужно время для открытия, а браузеру - некоторое время для перекомпоновки, особенно при переходе.Таким образом, Вы можете установить фокус по истечении определенного времени, используя простой setTimeout или, что еще лучше, используя события, предоставляемые Вашим модальным плагином.

В вашем .always - при условии, что выиспользуют модальность Bootstrap (если нет, укажите другое): 

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

Более того, вот ссылка: https://getbootstrap.com/docs/4.0/components/modal/

Из-за того, как HTML5 определяет свою семантику,HTML-атрибут autofocus не действует в модальностях Bootstrap.Чтобы добиться того же эффекта, используйте некоторый пользовательский JavaScript.

Если это тоже не сработает, вы должны изменить стратегию: оставьте на главной странице заглушку для пустого модала, затем заполните только толькосодержимое div с помощью запроса ajax.Таким образом, у вас будут обработчики событий и все остальные плагины, всегда доступные на главной странице.

0 голосов
/ 03 июня 2018

Нет необходимости использовать JQuery здесь, вы можете просто использовать HTML. 

<input type='text' class='form-control' id='intType' autofocus>
...