原地址:https://blog.csdn.net/qq_40001322/article/details/81448429
<!-- 验证码输入框 -->
HTML:
<div class="container" id="test">
<div class="val-box" id="val-box">
<input id="val-code-input" type="number" maxlength="4" onselectstart="return false;" onkeyup="this.value=this.value.replace(/[\D]/g, '')" onblur="this.value=this.value.replace(/[\D]/g, '')" oninput="if(value.length>4) value=value.slice(0,4)"/>
<p class="codeNews">输入短信验证码</p>
<div name="val-item" id="code_one"></div>
<div name="val-item" id="code_two"></div>
<div name="val-item" id="code_three"></div>
<div name="val-item" id="code_four"></div>
</div>
</div>
js:
$(function(){
var valCodeInput = $("#val-code-input");
var valCodeItems = $("div[name='val-item']");
var regex = /^[\d]+$/;
var valCodeLength = 0;
$('#val-box').on('click',function(){
valCodeInput.focus();
});
valCodeInput.on('input propertychange change', function(e){
valCodeLength = valCodeInput.val().length;
if(valCodeInput.val() && regex.test(valCodeInput.val())) {
$('.codeNews').hide();
$('#code_login').removeClass('next-btn');
$(valCodeItems[valCodeLength - 1]).removeClass('available');
$(valCodeItems[valCodeLength - 1]).addClass('available');
$(valCodeItems[valCodeLength]).removeClass('available');
$(valCodeItems[valCodeLength]).addClass('available');
$(valCodeItems[valCodeLength - 1]).text(valCodeInput.val().substring(valCodeLength - 1, valCodeLength));
}else{
$('.codeNews').show();
$('#code_login').addClass('next-btn');
}
})
$("#code_get,#next,div[name='val-item']").on("tap",function(){
$(valCodeInput).focus();
$(valCodeItems[0]).addClass('available');
})
$(this).on('keyup', function(e){
if(e.keyCode === 8) {
$(valCodeItems[valCodeLength]).text("");
if(valCodeLength !== 0){
$(valCodeItems[valCodeLength]).removeClass('available');
$(valCodeItems[valCodeLength+1]).removeClass('available');
}
}
});
$(valCodeInput).on("input propertychange",function(){
if (valCodeInput.val().length == 4) {
$(valCodeItems[0]).text(valCodeInput.val().substring(0,1));
$(valCodeItems[1]).text(valCodeInput.val().substring(1,2));
$(valCodeItems[2]).text(valCodeInput.val().substring(2,3));
$(valCodeItems[3]).text(valCodeInput.val().substring(3,4));
$(valCodeItems[1]).addClass('available');
$(valCodeItems[2]).addClass('available');
// $("#yanzhengma").fadeOut(200,function(){
// $("#dialog1").fadeIn(200);
//})
}
})
})
css:
.codeNews{
font-size: .4rem !important;
position: absolute;
left:0;
top: -0.3rem;
background-color: rgba(255, 255, 255, 0);
}
.container{
position: absolute;
top:5.6rem;
text-align: center;
}
.container p{
font-family: '微软雅黑';
color: #888;
}
.val-box {
display: inline-block;
height: 0.9rem;
width: 8.6rem;
text-align: center;
position: relative;
background: #FFFFFF;
-webkit-tap-highlight-color: transparent;
}
.val-box input[type=number] {
position: absolute;
left: 0;
top: 0;
height: 34px;
width: 212px;
opacity: 0.9;
z-index: -999;
outline: none;
margin-left: -250px;
-webkit-tap-highlight-color: transparent;
}
.val-box p{
color: rgb(204, 204, 204);
position: absolute;
padding: .39rem .27rem 0.1rem 0.27rem;
}
.val-box div {
height: 39px;
width: 22%;
border-bottom: 1px solid #DDD;
float: left;
margin: 2px 3px;
z-index: 5;
font-size: 1.5em;
font-family: arial;
/*font-weight: 530;*/
text-align: center;
line-height: 1.5em;
cursor: text;
/*padding-bottom: 10px;*/
}
.val-box .available {
border-bottom-color: #0081db;
}
.val-box .availabla:after {
/*伪类实现光标效果*/
content: '';
display: inline-block;
height: 90%;
width: 1px;
background: #313131;
animation: .8s animate infinite;
}