0

На сайте есть кнопка, при нажатии на нее открывается модальное окно. В модальном окне есть input. Как сделать так, чтобы при открытии модального окна сразу можно было печатать в input, без отдельного нажатия на него?

1 ответ 1

2

var button = document.querySelector('button');
var input = document.querySelector('input');

button.addEventListener('click', openModal);

function openModal() {
	// your code...
  input.focus();
}
<button>кнопка открытия модального окна</button>
<input type="text">

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

var button = document.querySelector('#search');
var input = document.querySelector('#story');

button.addEventListener('click', openModal);
function openModal() {
  setTimeout(() => {
    input.focus();
  }, 500)
}

Или вот вариант на jquery(взято отсюда https://stackoverflow.com/a/11634933/12226424):

$('.modal').on('shown.bs.modal', function () {
  $('#story').focus();
}) 
2
  • Спасибо, вижу что то, что нужно, но объясните, пожалуйста, почему не работает здесь? jsfiddle.net/fzwsjnc8/3 22 окт 2019 в 23:23
  • Спасибо огромное, вариант на jQuery отличный! 23 окт 2019 в 0:56

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.