<div class="demo">
<input type="text" class='demoInput'>
<div class='numberDiv'></div>
<div class='numberDiv'></div>
<div class='numberDiv'></div>
<div class='numberDiv'></div>
</div>
$('.numberDiv').click(function () {
$('.demoInput').focus();
})
var inputLock = false;
$('.demoInput').on('compositionstart', function () {
inputLock = true;
})
$('.demoInput').on('compositionend', function () {
inputLock = false;
changeNum()
})
$('.demoInput').on('input', function () {
changeNum()
})
function changeNum() {
if (!inputLock) {
var numbers = $('.demoInput').val()
var arr = numbers.split("")
var numberDiv = $('.numberDiv');
$.each(numberDiv, function (idx, ele) {
var text = arr[idx] == undefined ? '' : arr[idx];
var addClassFlag = arr[idx] == undefined ? '' : 'on'
$(ele).html(text).removeClass('on').addClass(addClassFlag);
})
$('.demoInput').val($('.demoInput').val().slice(0, 4))
}
}
* {
padding: 0;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.demo {
width: 230px;
height: 50px;
margin: 200px auto;
overflow: hidden;
position: relative;
}
.demoInput {
position: absolute;
opacity: 1;
top: 100px;
z-index: -1;
}
.numberDiv {
width: 50px;
height: 50px;
border: 1px solid #ccc;
box-sizing: border-box;
float: left;
margin-left: 10px;
font-size: 24px;
color: red;
line-height: 48px;
text-align: center;
}
.numberDiv.on {
border-color: red;
}
.numberDiv:first-of-type {
margin-left: 0;
}