SOURCE

console 命令行工具 X clear

                    
>
console
(function(){
	var container = document.getElementById("inputBoxContainer");
		boxInput = {
		maxLength:"",
		realInput:"",
		bogusInput:"",
		bogusInputArr:"",
		callback:"",
		init:function(fun){
			var that = this;
			this.callback = fun;
			that.realInput = container.children[0];
			that.bogusInput = container.children[1];
			that.bogusInputArr = that.bogusInput.children;
			that.maxLength = that.bogusInputArr[0].getAttribute("maxlength");
			that.realInput.oninput = function(){
				that.setValue();
			}
			that.realInput.onpropertychange = function(){
				that.setValue();
			}
		},
		setValue:function(){
			this.realInput.value = this.realInput.value.replace(/\D/g,"");
			console.log(this.realInput.value.replace(/\D/g,""))
			var real_str = this.realInput.value;
			for(var i = 0 ; i < this.maxLength ; i++){
				this.bogusInputArr[i].value = real_str[i]?real_str[i]:"";
			}
			if(real_str.length >= this.maxLength){
				this.realInput.value = real_str.substring(0,6);
				this.callback();
			}
		},
		getBoxInputValue:function(){
			var realValue = "";
			for(var i in this.bogusInputArr){
				if(!this.bogusInputArr[i].value){
					break;
				}
				realValue += this.bogusInputArr[i].value;
			}
			return realValue;
		}
	}
})()
boxInput.init(function(){
  getValue();
});
document.getElementById("confirmButton").onclick = function(){
  getValue();
}
function getValue(){
  document.getElementById("showValue").innerText = boxInput.getBoxInputValue();
}
<div class="wrap">
  <div class="inputBoxContainer" id="inputBoxContainer">
    <input type="text" class="realInput"/>
    <div class="bogusInput">
      <input type="password" maxlength="6" disabled/>
      <input type="password" maxlength="6" disabled/>
      <input type="password" maxlength="6" disabled/>
      <input type="password" maxlength="6" disabled/>
      <input type="password" maxlength="6" disabled/>
      <input type="password" maxlength="6" disabled/>
    </div>
  </div>
  <button id="confirmButton" class="confirmButton">查看</button>
  <p class="showValue" id="showValue"></p>
</div>
.wrap{
	margin: 10px auto;
	width: 329px;
	height: 640px;
	background: url(https://thumbnail0.baidupcs.com/thumbnail/75b9146e1d719cc346450b0ea8e83e82?fid=4012976132-250528-27418458708982&time=1471528800&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-au2b9m6d9d%2bsKOArKulK%2bztbd04%3d&expires=8h&chkbd=0&chkv=0&dp-logid=5355760796609128862&dp-callid=0&size=c1280_u800&quality=90) no-repeat;
	background-size: 100%;
	padding-top: 200px;
}
.inputBoxContainer{
	width: 240px;
	height: 50px;
	margin: 0 auto;
	position: relative;
}
.inputBoxContainer .bogusInput{
	width: 100%;
	height: 100%;
	border: #c3c3c3 1px solid;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	overflow: hidden;
	position: absolute;
	z-index: 0;
}
.inputBoxContainer .realInput{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
	z-index: 1;
	filter:alpha(opacity=0); 
	-moz-opacity:0; 
	opacity:0;
}
.inputBoxContainer .bogusInput input{
	padding: 0;
	width: 16.3%;
	height: 100%;
	float:left;
	background: #ffffff;
	text-align: center;
	font-size: 20px;
	border: none;
	border-right: #C3C3C3 1px solid;
}
.inputBoxContainer .bogusInput input:last-child{
	border: none;
}
.confirmButton{
	width: 240px;
	height: 45px;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	background: #f4f4f4;
	border: #d5d5d5 1px solid;
	display: block;
	font-size: 16px;
	margin: 30px auto;
	margin-bottom: 20px;
}
.showValue{
	width: 240px;
	height: 22px;
	line-height: 22px;
	font-size: 16px;
	text-align: center;
	margin: 0 auto;
}