html5仿支付寶密碼框的實(shí)現(xiàn)代碼
發(fā)布時(shí)間：2017-09-06 14:33:55 作者：佚名 
我要評(píng)論
我要評(píng)論本文通過實(shí)例代碼給大家介紹了html5仿支付寶密碼框效果，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
廢話不多說了，直接給大家貼代碼了，具體代碼所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>仿支付寶密碼框-移動(dòng)端測</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
.clearfix:after {
clear: both;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.alieditContainer {
position: relative;
}
.sixDigitPassword {
position: absolute;
left: -222px;
top: 0;
width: 1000px;
height: 26px;
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 {
cursor: text;
background: #fff;
outline: none;
position: relative;
padding: 8px 0;
height: 15px;
border: 1px solid #cccccc;
border-radius: 2px;
}
.sixDigitPassword-box i {
float: left;
display: block;
padding: 4px 0;
height: 7px;
border-left: 1px solid #cccccc;
}
.sixDigitPassword-box .active {
background: url('password-blink.gif') no-repeat center center;
}
.sixDigitPassword-box b {
display: block;
margin: 0 auto;
width: 7px;
height: 7px;
overflow: hidden;
visibility: hidden;
background: url('passeord-dot.png') no-repeat;
}
.sixDigitPassword-box span {
position: absolute;
display: block;
left: 0px;
top: 0px;
height: 30px;
border: 1px solid rgba(82, 168, 236, .8);
border: 1px solid #00ffff\9;
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 {
position: relative;
height: 33px;
width: 182px;
overflow: hidden;
vertical-align: middle;
}
}
</style>
</head>
<body>
<form action="" method="post" name="payPassword" id="form_paypsw">
<div id="payPassword_container" class="alieditContainer clearfix" data-busy="0">
<label for="i_payPassword" class="i-block">支付密碼：</label><br />
<div class="i-block" data-error="i_error">
<div class="i-block six-password">
<input class="i-text sixDigitPassword" id="payPassword_rsainput" type="tel" 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" style="width: 180px;">
<i style="width: 29px; border-color: transparent;" class=""><b style="visibility: hidden;"></b></i>
<i style="width: 29px;"><b style="visibility: hidden;"></b></i>
<i style="width: 29px;"><b style="visibility: hidden;"></b></i>
<i style="width: 29px;"><b style="visibility: hidden;"></b></i>
<i style="width: 29px;"><b style="visibility: hidden;"></b></i>
<i style="width: 29px;"><b style="visibility: hidden;"></b></i>
<span style="width: 29px; left: 0px; visibility: hidden;" id="cardwrap" data-role="cardwrap"></span>
</div>
</div>
</div>
</div>
</form>
<button class="passBtn" style="margin-top:20px;">確認(rèn)</button>
<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-validate.js" type="text/javascript"></script>
<script type="text/javascript">
var _formPay = $('#form_paypsw');
_formPay.validate({
rules: {
'payPassword_rsainput': {
'minlength': 6,
'maxlength': 6,
required: true,
digits: true
}
}
});
var payPassword = $("#payPassword_container"),
_this = payPassword.find('i'),
k = 0,
j = 0,
password = '',
_cardwrap = $('#cardwrap');
//點(diǎn)擊隱藏的input密碼框,在6個(gè)顯示的密碼框的第一個(gè)框顯示光標(biāo)
payPassword.on('focus', "input[name='payPassword_rsainput']", function() {
var _this = payPassword.find('i');
if(payPassword.attr('data-busy') === '0') {
//在第一個(gè)密碼框中添加光標(biāo)樣式
_this.eq(k).addClass("active");
_cardwrap.css('visibility', 'visible');
payPassword.attr('data-busy', '1');
}
});
//change時(shí)去除輸入框的高亮，用戶再次輸入密碼時(shí)需再次點(diǎn)擊
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事件，綁定鍵盤上的數(shù)字按鍵和backspace按鍵
payPassword.on('keyup', "input[name='payPassword_rsainput']", function(e) {
var e = (e) ? e : window.event;
//鍵盤上的數(shù)字鍵按下才可以輸入
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--;) {
//輸入到第幾個(gè)密碼框，第幾個(gè)密碼框就顯示高亮和光標(biāo)（在輸入框內(nèi)有2個(gè)數(shù)字密碼，第三個(gè)密碼框要顯示高亮和光標(biāo)，之前的顯示黑點(diǎn)后面的顯示空白，輸入和刪除都一樣）
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 === 6) {
j = 5;
} else {
j = k;
}
$('#cardwrap').css('left', j * 30 + 'px');
}
} else {
//輸入其他字符，直接清空
var _val = this.value;
this.value = _val.replace(/\D/g, '');
}
});
//獲取密碼
$('.passBtn').on('click', function() {
var reg = new RegExp("^[0-9]*$");//驗(yàn)證數(shù)字
var pass = $('#payPassword_rsainput').val();
/*PC端測試：主鍵盤的數(shù)字對應(yīng)的字符對應(yīng)的keyCode相同，所以也可顯示到框中。但是input中value沒有數(shù)字，判斷一下非空即可。
*移動(dòng)端測試： *和#都可輸入，需正則驗(yàn)證一下非法字符
* */
if(!pass){
alert('密碼為空，請輸入密碼');
}else if(pass.length < 6){
alert('密碼長度為6位');
}else if(!reg.test(pass)){
alert("密碼含有非法字符，請重新輸入");
}else{
alert(pass);
}
});
</script>
</body>
</html>
需要的資源：
1、jquery-2.1.0.js----版本不限
2、jquery-validate.js----插件
插件代碼下載地址：http://xiazai.jb51.net/201709/yuanma/chajian_jb51.rar
效果圖：
總結(jié)
以上所述是小編給大家介紹的html5仿支付寶密碼框的實(shí)現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
給大家分享一個(gè)仿微信支付 H5 頁面，使用 WeUI 制作，并且兼容了 iPhone X、iPhone X Max、 iPhone XR 等機(jī)型。非常不錯(cuò)，需要的朋友可以來腳本之家下載吧2020-04-01- 這篇文章主要介紹了詳解Html5微信支付爬坑之路的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-24
基于HTML5+tracking.js實(shí)現(xiàn)刷臉支付功能
這篇文章主要介紹了基于HTML5+tracking.js實(shí)現(xiàn)刷臉支付功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-16
