console
var input =document.querySelector('input'),
spans = document.querySelectorAll('span');
input.addEventListener('input', function(){
var value = this.value, l = value.length;
for( var i = 0; i < 4; i++){
spans[i].innerHTML = value[i] || '';
spans[i].style.borderColor = '';
}
if( l>0 ) {
spans[Math.min(3,l)].style.borderColor = '#59C7B2';
}else{
spans[0].style.borderColor = '#59C7B2';
}
}, false);
input.addEventListener('blur', function(){
this.focus();
}, false);
input.focus();
spans[0].style.borderColor = '#59C7B2';
<span></span>
<span></span>
<span></span>
<span></span>
<input type="text" max-length='4'>
span{
border: 2px solid #ccc;
display: inline-block;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin: auto 4px;
vertical-align: middle;
font-size: 30px;
}
input{
height: 1px;
overflow: hidden;
padding: 0;
border: none;
background-color: transparent;
color: transparent;
}
input:focus{
outline: none;
}