Имея такой код я хочу сделать логику опросника подобную этой: https://nasty6.typeform.com/to/BgJEd2 , то есть чтобы при вводе в поле какой-либо информации и нажатии на Enter происходил переход на другой input, а неактивные поля становились затемненными как в примере. У кого-то есть идеи как это реализовать или же где можно посмотреть? Заранее спасибо огромное Вам!!!
<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>
Попробуйте так:
Статья про обработчики событий
Обработчик нужно будет удалить, когда он больше не нужен.
UPD. Похоже, что e.keyCode лучше заменить на key - https://stackoverflow.com/a/43418287/8579902
var key = e.key;
if (key === 'Enter')
Документация
//Все поля
var inputs = document.querySelectorAll(".interview__item input");
inputs.forEach(function(input, i) {
//Следим за нажатием кнопки
input.addEventListener("keypress", function(e) {
var key = e.which || e.keyCode;
//Если нажат Enter
if (key === 13) {
//<input disabled .... />
input.disabled = true;
if(i < inputs.length - 1)
//Переводим фокус на следующее поле
inputs[i + 1].focus();
}
});
});
<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>
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости