<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>
const inputs = document.querySelectorAll('input');
inputs.forEach(i => {
i.addEventListener('input', onInput);
i.addEventListener('keydown', onKeyDown);
})
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()
}
}
}
function onKeyDown(e) {
if (e.key === 'Enter') {
e.preventDefault();
// Если все поля заполнены, вызываем функцию
if (checkInputs()) {
sendForm();
}
}
}
function checkInputs() {
let isFilled = true;
inputs.forEach(i => {
if (!i.value) {
isFilled = false;
}
});
return isFilled;
}
function sendForm() {
// Ваш код для отправки формы
alert('Тут вызвалась моя функция')
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.