<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();
}
}
}
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.