廢話不多說了，直接給大家貼代碼了，具體代碼所示：
<!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>仿支付寶密碼框-移動端測</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;">確認</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'); //點擊隱藏的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 === 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]*$");//驗證數字 var pass = $('#payPassword_rsainput').val(); /*PC端測試：主鍵盤的數字對應的字符對應的keyCode相同，所以也可顯示到框中。但是input中value沒有數字，判斷一下非空即可。 *移動端測試： *和#都可輸入，需正則驗證一下非法字符 * */ 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.VeVb.com/201709/yuanma/chajian_jb51.rar
效果圖：
總結
以上所述是小編給大家介紹的html5仿支付寶密碼框的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
