переход к следующему полю формы на чистом js

Question

Подскажите пожалуйста как реализовать? Есть форма 5 полей. Изначально видно 2. Когда оба поля заполнены, видно остальные 3.

Answer 1

Можно как-то так

const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const input3 = document.getElementById('input3');
const input4 = document.getElementById('input4');
const input5 = document.getElementById('input5');
function checkInput() {
  if(input1.value && input2.value) {
    input3.style.display = "block"
    input4.style.display = "block"
    input5.style.display = "block"
  }
}
input1.addEventListener("change", checkInput);
input2.addEventListener("change", checkInput);

#input3,#input4,#input5 {
  display: none;
}

<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
<input type="text" id="input4">
<input type="text" id="input5">

Answer 2

Мое решение этой задачи. Тут вы получаете массив всех полей и дальше обычные проверки на индекс и на пустую строку, и самый простой цикл.

Но в предь, показывайте хотя бы хоть какие-то наработки, за вас в будущем никто ничего не напишет

(() => {
  const fields = document.querySelectorAll("input");

  fields.forEach((field, index) => {
    field.addEventListener("input", (e) => {
      if (index === 0 || index === 1) {
        if (fields[0].value !== "" && fields[1].value !== "") {
          for (let i = 2; i < fields.length; ++i) {
            fields[i].classList.remove("hidden");
          }
        }
      }
    });
  });
})();

body {font-family: sans-serif;}form {padding: 20px;}input,button {display: block;margin: 5px 0;}.hidden {display: none;}

<form>
  <input type="text" class="input" name="field1" placeholder="field1" />
  <input type="text" class="input" name="field2" placeholder="field2" />
  <input type="text" class="input hidden" name="field3" placeholder="field3" />
  <input type="text" class="input hidden" name="field4" placeholder="field4" />
  <input type="text" class="input hidden" name="field5" placeholder="field5" />
</form>

БЛОГ НА HUSL

переход к следующему полю формы на чистом js

Ответы (2 шт):