Поэтапный опросник на JavaScript

408
23 июля 2019, 19:00

Имея такой код я хочу сделать логику опросника подобную этой: 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>

Answer 1

Попробуйте так:

Статья про обработчики событий

Обработчик нужно будет удалить, когда он больше не нужен.

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>

READ ALSO
Преобразование скалярных типов при сравнении JavaScript

Преобразование скалярных типов при сравнении JavaScript

Объясните, пожалуйста, почему из трех алертов ниже исполняется только последний? Вроде как во всех трёх случаях идет мягкое сравнение на равенство...

170
Подскажите хороший слайдер [закрыт]

Подскажите хороший слайдер [закрыт]

Нужен слайдер, где будет отображаться три окна и при клике на PREV NEXT будут внутри трёх окон меняться картинкиРазмеры окон разные: будут картинки...

153
Выбор региона WordPress

Выбор региона WordPress

Как сделать на сайте Wordpress выбор региона, ну типа "Какой ваш город" и чтобы далее в зависимости от города менялась информация на сайте, подскажите...

147
Убрать лишнее подзапросом

Убрать лишнее подзапросом

Помогите пожалуйста понять, как сделать выборку в задаче: Есть таблица (извините, туповато выглядит, но ничего умнее не придумалось)

174