效果图:
HTML代码:
请输入您的专享密码
确认
body{
background: #fff;
font-size:0.7rem;
}
input{
color:transparent;
text-shadow:0 0 0 #000;
font-size:1rem;
}
.rec_in_container{
padding:0 1.25rem;
}
.rec_in_container p{
margin:1.5rem 0;
color: #999;
}
.rec_in_show{
position: relative;
}
.rec_in_input{
height: 2.35rem;
width: 200%;
position: absolute;
top:0;
left:0;
z-index: 1;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
margin-left: -100%;
color:transparent;
text-shadow:0 0 0 #000;
}
.rec_in_pw{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-pack: space-between;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.rec_in_pw div{
width: 2.35rem;
height:2.35rem;
background: #f0f0f0;
padding: 0;
text-align: center;
position: relative;
}
.rec_in_pw div i{
display: inline-block;
width: .4rem;
height:.4rem;
position: absolute;
top:0;
right:0;
left: 0;
bottom: 0;
margin: auto;
background: #000;
border-radius: 50%;
display: none;
}
.rec_in_submit{
text-align: center;
margin-top:2rem;
}
.rec_in_submit span{
display: inline-block;
width: 14.05rem;
height:2.2rem;
background: #ff9a96;
color: #fff;
font-size:.9rem;
line-height: 2.4rem;
border-radius: .2rem;
}
(function(){
var container = document.getElementById("inputBoxContainer");
boxInput = {
maxLength:6,
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.realInput.oninput = function(){
that.setValue();
}
that.realInput.onpropertychange = function(){
that.setValue();
}
},
setValue:function(){
this.realInput.value = this.realInput.value.replace(/\D/g,"");
var real_str = this.realInput.value;
var real_len = this.realInput.value.length > this.maxLength ? this.maxLength : this.realInput.value.length;
for(var i=0 ;i
= this.maxLength){
this.realInput.value = real_str.substring(0,this.maxLength);
this.callback();
}
},
getBoxInputValue:function(){
return this.realInput.value;
}
}
})()
boxInput.init(function(){
//每次输入回调
});
document.getElementById("confirmButton").onclick = function(){
checkId();
}
function checkId(){
//判断是否符合资格
if(boxInput.getBoxInputValue().length == 6){
console.log(boxInput.getBoxInputValue());
}
}