Как сделать активный фокус input для модального окна?

Question

[Андрей Борчик]

Как сделать активный фокус инпут-а в модальном окне при открытии?
в сети куча примеров для bootstrap, но мне этот вариант не подходит

Comments

[Антон Литвиненко]

В скрипт открытия окна допишите строчку, которая будет устанавливать фокус в нужный инпут, что-то вроде
$('.input').focus();

[Андрей Борчик]

Антон Литвиненко, у меня на чистом css реализовано с помощью :target и перехода по якорю к модальному окну

[Антон Литвиненко]

Андрей Борчик,
ну то просто добавьте в инпут атрибут autofocus

[Андрей Борчик]

Антон Литвиненко, не срабатывает...
фокус видимо перемещается на кнопку открытия модального окна

[Антон Литвиненко]

Андрей Борчик, оформите в песочницу, вместе подумаем

[Андрей Борчик]

Антон Литвиненко, вот код https://codepen.io/andrew-borchik/pen/ZEBZPVZ

Answer 1

[Антон Литвиненко]

Кнопке открывания дал класс modal-open/
Проблема установки фокуса в том, что фокус идет на кнопку открытия модалки, возможно кто предложит что лучше

document.addEventListener('DOMContentLoaded', function() {
  let $btn = document.querySelector('.modal-open');
  let $input = document.querySelector('#search_query');
  $btn.addEventListener('click', function() {
    setTimeout(function(){
      $input.focus();
    }, 100);
  });
});

Comments

[Андрей Борчик]

а можете на примере в код вставить? https://codepen.io/andrew-borchik/pen/ZEBZPVZ

[Андрей Борчик]

получилось