html
<div class="yzm-cont">
<input id="val-code-input" type="tel" maxlength="6" onkeyup="checkForNum(this)" onselectstart="return false;" onblur="checkForNum(this)" />
<div class="my_input" name="val-item"></div>
<div class="my_input" name="val-item"></div>
<div class="my_input" name="val-item"></div>
<div class="my_input" name="val-item"></div>
<div class="my_input" name="val-item"></div>
<div class="my_input" name="val-item"></div>
</div>
css
#yzmmodal div.yzm-cont{
margin-top: 20px;
justify-content: space-between;
}
#yzmmodal div.yzm-cont input{
position: absolute;
z-index: 0;
width: 100%;
height: 37px;
border: none;
outline: none;
color: #fff;
}
#yzmmodal div.yzm-cont .my_input{
width: 13%;
height: 37px;
outline: none;
border: 1px solid rgba(140,140,140,1);;
border-radius: 10px;
caret-color: transparent;
display: flex;
justify-content: center;
align-items: center;
z-index: 20;
}
#yzmmodal div.yzm-cont .my_input.available {
border: 1px solid #0081db;
}
js
var valCodeInput = $('#val-code-input');
var valCodeItems = $(".my_input");
var regex = /^[\d]+$/;
var valCodeLength = 0;
valCodeInput.on('input propertychange change', (e) => {
$(valCodeItems).each(function(i){
if($(this).text() != ''){
$(this).addClass('available')
}
})
valCodeLength = valCodeInput.val().length;
console.log("wode="+valCodeInput.val())
if(valCodeLength == 6){
console.log(valCodeLength)
$(valCodeItems).addClass('available')
$(valCodeItems[0]).text(valCodeInput.val()[0])
$(valCodeItems[1]).text(valCodeInput.val()[1])
$(valCodeItems[2]).text(valCodeInput.val()[2])
$(valCodeItems[3]).text(valCodeInput.val()[3])
$(valCodeItems[4]).text(valCodeInput.val()[4])
$(valCodeItems[5]).text(valCodeInput.val()[5])
}else{
console.log(valCodeLength)
}
if(valCodeInput.val() && regex.test(valCodeInput.val())) {
$(valCodeItems[valCodeLength - 1]).addClass('available');
$(valCodeItems[valCodeLength - 1]).text(valCodeInput.val().substring(valCodeLength - 1, valCodeLength));
}
})
$(this).on('keyup', (e) => {
if(e.keyCode === 8) {
$(valCodeItems[valCodeLength]).removeClass('available');
$(valCodeItems[valCodeLength]).text("");
}
});
function checkForNum(obj) {
obj.value = obj.value.replace(/[\D]/g, '');
}
$(".my_input").click(function(){
$('#val-code-input').focus();
})