@kot98

Почему не удаляется последнее значение?

Есть 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 удаляется значение предыдущего инпута (значение четвертого остается).
  • Вопрос задан
  • 103 просмотра
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae Куратор тега TypeScript
Тлен
На каждое срабатывание nextStep ты вешаешь новый слушатель keydown.
10 буковок ввёл - 10 слушателей весит. Работать это говно, соответственно, может как угодно.

И вообще нефиг смешивать vue и работу с сырым dom.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
30 янв. 2023, в 04:49
1500 руб./за проект
30 янв. 2023, в 04:49
1500 руб./за проект
30 янв. 2023, в 03:43
10000 руб./за проект