<form id="myForm">
<input class="input1" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=1>
<input class="input2" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=2>
<input class="input3" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=3>
<input class="input4" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=4>
<input class="input5" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=5>
<input class="input6" type="text" maxlength="1" oninput='this.value=this.value.replace(/[^а-яё]+/g, "");' data-n=6>
<button type="submit">Отправить</button>
</form>
const form = document.getElementById('myForm')
const inputs = document.querySelectorAll('input')
let isValid = false
inputs.forEach(i => i.addEventListener('input', onInput))
function onInput(e) {
e.target.value = e.target.value[e.target.value.length - 1] || "";
const n = e.target.dataset.n
const next = document.querySelector(`input[data-n="${+n + 1}"]`)
if (e.target.value == "") {
if (n == 1) {
document.querySelector(`input[data-n=1]`).focus();
} else {
document.querySelector(`input[data-n="${+n - 1}"]`).focus();
}
} else {
if (next) {
next.focus()
}
}
// Проверка введенных значений
if (inputs[5].value) {
isValid = true
} else {
isValid = false
}
}
form.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !isValid) {
e.preventDefault()
} else if (e.key === 'Enter' && isValid) {
event.preventDefault();
alert('Тут сработала моя функция')
}
})
form.addEventListener("submit", onSubmit);
function onSubmit(event) {
event.preventDefault(); // Предотвращаем отправку формы
alert('Тут сработала отправка форму по клику')
// Ваш код для выполнения при отправке формы
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.