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