首页 > 开发 > HTML5 > 正文

html5仿支付宝密码框的实现代码

2024-09-05 07:19:08
字体:
来源:转载
供稿:网友

废话不多说了,直接给大家贴代码了,具体代码所示:

<!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仿支付宝密码框的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表