SOURCE

console 命令行工具 X clear

                    
>
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;
}