1、效果图
2、代码实现
<html>
<head>
<meta charset="tf-8">
<title>17.com</title>
<style>
/*
验证码框
*/
.load-message {
1180px;
background: white;
margin: 0 auto;
}
.load-message .message {
446px;
margin: 0 auto;
padding: 40px 0 0 0;
}
.load-message .message .tip2 {
height: 23px;
}
.load-message .message .tip3 a {
display: inline-block;
140px;
height: 48px;
text-align: center;
line-height: 48px;
font-size: 14px;
text-decoration: none;
float: left;
margin: 0 0 0 10px;
border-radius: 3px;
}
.before {
background: #2C88F3;
color: white;
}
.before:hover {
background: #217CE3;
}
.input_form {
height: 62px;
}
.form_paypsw {
240px;
height: 62px;
float: left;
}
.sixDigitPassword {
position: absolute;
top: 0;
240px;
height: 48px;
color: #fff;
font-size: 12px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-user-select: initial;
outline: 'none';
z-index: 999;
opacity: 0;
filter: alpha(opacity=0);
}
.sixDigitPassword-box {
240px;
height: 28px;
cursor: text;
background: #fff;
outline: none;
position: relative;
padding: 10px 0;
border-radius: 2px;
}
.sixDigitPassword-box i {
58px;
float: left;
display: block;
padding: 10px 0;
height: 10px;
border-left: 1px solid #cccccc;
}
.sixDigitPassword-box .active {
background: url('/imgs/password-blink.gif') no-repeat center center;
}
.sixDigitPassword-box b {
display: block;
margin: 0 auto;
7px;
height: 7px;
overflow: hidden;
visibility: hidden;
background: url('/imgs/passeord-dot.png') no-repeat;
}
.sixDigitPassword-box span {
position: absolute;
display: block;
left: 0px;
top: 0px;
58px;
height: 48px;
border: 1px solid rgba(82, 168, 236, .8);
border: 1px solid #00ffff9;
border-radius: 2px;
visibility: hidden;
-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.75), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.ui-securitycore .ui-form-item .ui-form-explain {
margin-top: 8px;
}
.i-block {
display: inline-block;
}
.six-password {
display: inline-block;
position: relative;
237px;
height: 50px;
overflow: hidden;
vertical-align: middle;
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<div class="load-message">
<div class="message">
<p class="tip2">请输入4位验证码：</p>
<div class='input_form tip3'>
<form action="" method="post" name="payPassword" id="form_paypsw" class='form_paypsw'>
<div id="payPassword_container" class="alieditContainer clearfix left-input" data-busy="0">
<div class="i-block" data-error="i_error">
<div class="i-block six-password">
<input class="i-text sixDigitPassword" id="payPassword_rsainput" type="password" autocomplete="off" required="required" value="" name="payPassword_rsainput" data-role="sixDigitPassword" tabindex="" maxlength="6" minlength="6" aria-required="true">
<div tabindex="0" class="sixDigitPassword-box">
<i style="border-color: transparent;" class=""><b style="visibility: hidden;"></b></i>
<i><b style="visibility: hidden;"></b></i>
<i><b style="visibility: hidden;"></b></i>
<i><b style="visibility: hidden;"></b></i>
<span style="left: 0px; visibility: hidden;" id="cardwrap" data-role="cardwrap"></span>
</div>
</div>
</div>
</div>
</form>
<div class='right-btn'>
<a href="#" class='get-qr-code before'>
获取验证码
</a>
</div>
</div>
</div>
<script src='js/jquery-1.8.3.min.js'></script>
<script>
$(function(window, $) {
initQrCodeEvent();
function initQrCodeEvent() {
var payPassword = $("#payPassword_container"),
_this = payPassword.find('i'),
k = 0,
j = 0,
password = '',
_cardwrap = $('#cardwrap');
//点击隐藏的input密码框,在6个显示的密码框的第一个框显示光标
payPassword.on('focus', "input[name='payPassword_rsainput']", function() {
var _this = payPassword.find('i');
if (payPassword.attr('data-busy') === '0') {
//在第一个密码框中添加光标样式
_this.eq(k).addClass("active");
_cardwrap.css('visibility', 'visible');
payPassword.attr('data-busy', '1');
}
});
//change时去除输入框的高亮，用户再次输入密码时需再次点击
payPassword.on('change', "input[name='payPassword_rsainput']", function() {
_cardwrap.css('visibility', 'hidden');
_this.eq(k).removeClass("active");
payPassword.attr('data-busy', '0');
}).on('blur', "input[name='payPassword_rsainput']", function() {
_cardwrap.css('visibility', 'hidden');
_this.eq(k).removeClass("active");
payPassword.attr('data-busy', '0');
});
//使用keyup事件，绑定键盘上的数字按键和backspace按键
payPassword.on('keyup', "input[name='payPassword_rsainput']", function(e) {
var e = (e) ? e : window.event;
//键盘上的数字键按下才可以输入
if (e.keyCode == 8 || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
k = this.value.length; //输入框里面的密码长度
l = _this.size(); //6
for (; l--;) {
//输入到第几个密码框，第几个密码框就显示高亮和光标（在输入框内有2个数字密码，第三个密码框要显示高亮和光标，之前的显示黑点后面的显示空白，输入和删除都一样）
if (l === k) {
_this.eq(l).addClass("active");
_this.eq(l).find('b').css('visibility', 'hidden');
} else {
_this.eq(l).removeClass("active");
_this.eq(l).find('b').css('visibility', l < k ? 'visible' : 'hidden');
}
if (k === 4) {
j = 3;
} else {
j = k;
}
$('#cardwrap').css('left', j * 59 + 'px');
}
} else {
//输入其他字符，直接清空
var _val = this.value;
this.value = _val.replace(/D/g, '');
}
});
}
}(window, jQuery))
</script>
</body>
</html>
3、总结