Как сделать счетчик ввода значений?

Question

Как сделать счетчик ввода значений?

Рейтинг: 0Ответов: 1Опубликовано: 24.05.2023

Подскажите пожалуйста как реализовать счетчик значений как на фото https://i.sstatic.net/nZiNw.png . Получается что в input можно писать только 1 цифру, и инпуты как-бы открываются по очереди когда вписывают значения. Спасибо

.tabs-transmit-readings__inputs-block{
  display: flex;
        align-items: flex-end;
}

input {
            border: 1px solid transparent;
            background: #f8f8f8;
            border-radius: 2px;
            width: 54px;
            height: 54px;
            padding: 12px 20px;
            margin: 0px 5px 0px 0px;
            font-weight: 600;
            font-size: 24px;
            line-height: math.div(29, 24);
            pointer-events: none;
        }

input._active{
  pointer-events: auto;
                border: 1px solid #ebebeb;
                background:#ffffff;
}
span {
            font-weight: 600;
            font-size: 24px;
            line-height: math.div(29, 24);
            color: #afafaf;
            margin: 0px 5px 0px 0px;
        }

<div class="tabs-transmit-readings__inputs-block">
  <input autocomplete="off" type="text" name="form[]" class="_active">
  <input autocomplete="off" type="text" name="form[]">
  <input autocomplete="off" type="text" name="form[]">
  <input autocomplete="off" type="text" name="form[]">
  <input autocomplete="off" type="text" name="form[]">
  <input autocomplete="off" type="text" name="form[]">
  <span>,</span>
  <input autocomplete="off" type="text" name="form[]">
  <input autocomplete="off" type="text" name="form[]">
  <input autocomplete="off" type="text" name="form[]">
</div>

css javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Впервые такое реализовываю, было интересно! Думаю можно это сделать как-то и лучше.
В моем варианте мы слушаем событие input у каждого input, убираем все символы кроме цифр и оставляем только один символ, если мы получили не пустое поле и у нас есть input после, то мы даем ему класс _active, делаем фокус на инпут и так же выбираем весь текст (на случай, если кто-то изменит поле, после которого идет заполненное другое, то выделив его мы можем сразу писать цифру).
Минусы: Если вставить в поле строку с цифрами, оно не вставит по одной цифре в последующие поля. Но этого не было в вопросе, так что остается это задание вам, если конечно же нужно.

const inputs = document.querySelectorAll(".tabs-transmit-readings__inputs-block input");

inputs.forEach((input, index) =>
{
  input.addEventListener("input", ({target}) =>
  {
     target.value = target.value.replaceAll(/\D+/g, '').slice(0, 1);
     
     if (target.value.length === 1 && inputs[index + 1] !== undefined)
     {
        inputs[index + 1].classList.add("_active");
        inputs[index + 1].focus();
        inputs[index + 1].select();
     }
  });
})

.tabs-transmit-readings__inputs-block {
  display: flex;
  align-items: flex-end;
}

input {
  border: 1px solid transparent;
  background: #f8f8f8;
  border-radius: 2px;
  width: 54px;
  height: 54px;
  padding: 12px 20px;
  margin: 0px 5px 0px 0px;
  font-weight: 600;
  font-size: 24px;
  line-height: math.div(29, 24);
  pointer-events: none;
}

input._active {
  pointer-events: auto;
  border: 1px solid #ebebeb;
  background: #ffffff;
}

span {
  font-weight: 600;
  font-size: 24px;
  line-height: math.div(29, 24);
  color: #afafaf;
  margin: 0px 5px 0px 0px;
}

<div class="tabs-transmit-readings__inputs-block">
  <input autocomplete="off" type="text" name="form[]" class="_active">
  <input autocomplete="off" type="text" name="form[]">
  <input autocomplete="off" type="text" name="form[]">
  <input autocomplete="off" type="text" name="form[]">
  <input autocomplete="off" type="text" name="form[]">
  <input autocomplete="off" type="text" name="form[]">
  <span>,</span>
  <input autocomplete="off" type="text" name="form[]">
  <input autocomplete="off" type="text" name="form[]">
  <input autocomplete="off" type="text" name="form[]">
</div>

Как сделать счетчик ввода значений?

Ответы