<div class="tabs-transmit-readings__inputs-block">
  <input maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" autocomplete="off" type="number" name="form[]" class="_active">
  <input maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" autocomplete="off" type="number" name="form[]">
  <input maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" autocomplete="off" type="number" name="form[]">
  <input maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" autocomplete="off" type="number" name="form[]">
  <input maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" autocomplete="off" type="number" name="form[]">
  <input maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" autocomplete="off" type="number" name="form[]">
  <span>,</span>
  <input maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" type="number" name="form[]">
  <input maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" autocomplete="off" type="number" name="form[]">
  <input maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" autocomplete="off" type="number" name="form[]">
</div>
.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;
    }
var fields = document.querySelectorAll('.tabs-transmit-readings__inputs-block input');

Array.from(fields).forEach((el,idx) => {
  el.addEventListener('input', function() {
   if (el.value.length == 1) {
     if (el.nextElementSibling) {
       if (el.nextElementSibling.tagName !== 'INPUT') {
          el = el.nextElementSibling;
          el.nextElementSibling.classList.add('_active');
          el.nextElementSibling.focus();
       } else {
         el.nextElementSibling.classList.add('_active');
         el.nextElementSibling.focus();
       }      
     }
   }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.