Имея такой код я хочу сделать логику опросника подобную этой: 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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Объясните, пожалуйста, почему из трех алертов ниже исполняется только последний? Вроде как во всех трёх случаях идет мягкое сравнение на равенство...
Нужен слайдер, где будет отображаться три окна и при клике на PREV NEXT будут внутри трёх окон меняться картинкиРазмеры окон разные: будут картинки...
Как сделать на сайте Wordpress выбор региона, ну типа "Какой ваш город" и чтобы далее в зависимости от города менялась информация на сайте, подскажите...
Помогите пожалуйста понять, как сделать выборку в задаче: Есть таблица (извините, туповато выглядит, но ничего умнее не придумалось)