Я хочу сделать чтобы input
'у вешался фокус когда он доскроливается до центра. Или при нажатии Enter ( Это я уже реализовал в скрипте ), если человек скроллит обратно, input
'у вешается focus
опять.
var inputs = document.querySelectorAll(".interview__item input");
inputs.forEach(function(input, i) {
//Следим за нажатием кнопки
input.addEventListener("keypress", function(e) {
var key = e.key;
//Если нажат Enter
if (key === 'Enter') {
//<input disabled .... />
input.disabled = true;
if(i < inputs.length - 1)
//Переводим фокус на следующее поле
inputs[i + 1].focus();
input.disabled = false;
}
});
});
.interview__item{
margin-top: 300px;
}
.interview__item:first-child{
margin-top: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="maincontent__text">Вопрос <span class="maincontent__number"></span> из 4</p>
<div class="interview__input-wrapper">
<div class="interview__item">
<div class="interview__item-text interview__text-main">Ваше имя?</div>
<input type="text" class="interview__input change__input" placeholder="Моё имя.." autofocus />
</div>
<div class="interview__item">
<div class="interview__item-text interview__text-main">Сколько Вам?</div>
<input type="text" class="interview__input change__input" placeholder="Мой возраст.." />
</div>
<div class="interview__item">
<div class="interview__item-text interview__text-main">Какой стаж?</div>
<input type="text" class="interview__input change__input" placeholder="Мой стаж.." />
</div>
<div class="interview__item">
<div class="interview__item-text interview__text-main">
Сильные стороны?
</div>
<input type="text" class="interview__input change__input" placeholder="Мои сильные стороны.." />
</div>
</div>
Буду очень признателен если поможете. Заранее спасибо!