Всем привет. У меня есть самая простая форма:
<form>
<input type=“Text”>
<input type=“Text”>
<input type=“Text”>
</form>
По умолчанию показывается только первое поле. Как после его заполнения вывести второе и так далее?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВсем привет. У меня есть самая простая форма:
<form>
<input type=“Text”>
<input type=“Text”>
<input type=“Text”>
</form>
По умолчанию показывается только первое поле. Как после его заполнения вывести второе и так далее?
Простейший вариант без JS:
input:valid + input { display: initial; }
input:invalid ~ input { display: none; }
<form>
<input type="text" required placeholder="Введите имя" pattern="[a-zA-Zа-яёА-ЯЁ]+">
<input type="number" required placeholder="Введите возраст">
<input type="e-mail" required placeholder="Введите E-mail" pattern="[a-zA-Z-]+@[a-zA-Z-]+\.[a-zA-Z-]{2,6}">
<input type="button" value="Отправить">
</form>
Как дополнительный бонус - можно сразу указать предварительные условия, для появления следующего поля, через атрибут pattern. Атрибут placeholder добавлен для наглядности.
Вот такой примитивный пример. Добавления нового input по наполнению
[...document.getElementsByTagName("input")].forEach(item => item.addEventListener("keyup", addNewInput));
function addNewInput(event) {
if (event.target.value.length == 10) {
this.removeEventListener("keyup", addNewInput);
let input = document.createElement("input");
form.appendChild(input);
input.setAttribute('type', 'text');
input.setAttribute('maxlength', '10');
input.addEventListener("keyup", addNewInput);
input.focus();
}
}
<form id="form">
<input type="Text" maxlength="10">
</form>