0

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

3

1 ответ 1

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>

8
  • А как возможно затемнять другие элементы если они не активны?
    – Dan
    4 янв 2019 в 20:28
  • @Dan то есть поле должно быть затемнено, пока на него не кликнули?
    – petrichor
    4 янв 2019 в 20:42
  • Да, и еще чтобы поле доскролливалось и пользователь не делал этого сам, в примере 4 вопроса, а что если их будет 50?
    – Dan
    4 янв 2019 в 20:50
  • Тогда можно изначально все поля сверстать disabled, повесить на них обработчик focus (чтобы учесть и тап с девайсов и переключение по полям с использованием tab), когда событие происходит, ставить disabled = false. А для скролла, при срабатывании обработчика нажатия Enter, скроллить к следующему элементу с помощью scrollIntoView.
    – petrichor
    4 янв 2019 в 21:02
  • Как альтернатива disabled - изначально background поля ставить затемненный, а при клике добавлять класс, в котором прописан background активного поля.
    – petrichor
    4 янв 2019 в 21:04

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.