Есть 4 инпута для ввода кода. Каждому присвоил
:data-id="index"
. code содержит 4 пустые переменные value
Нужно при заполнении одного переходить к следующему, и при удалении наоборот.
@input="nextStep"
...
const nextStep = (value: string) => {
if (value && !isNaN(+value)) {
const element = document.activeElement as HTMLElement
if (element.dataset.id) {
const id = +element.dataset.id
if (id < code.length - 1) {
const nextVal = document.querySelector(`input[data-id='${id + 1}']`) as HTMLElement
nextVal.focus()
}
if (id >0) {
const val = document.querySelector(`input[data-id='${id}']`) as HTMLElement
const prevVal = document.querySelector(`input[data-id='${id - 1}']`) as HTMLElement
val.addEventListener('keydown', function (event) {
if (event.code === 'Backspace') {
prevVal.focus()
}
})
}
}
}
}
Почему при нажатии backspace удаляется значение предыдущего инпута (значение четвертого остается).