angular仿支付宝密码框

项目需求，使用ng写一个密码框格子支付模块，一开始使用一个input+letter-spacing来分割字符，但是发现间距非常不好控制，随着字符的输入文本框字符串间距还会自动调整。最终从网上查找到一款jq仿支付宝密码输入框，于是我模仿编写了个指令模块，参考地址如下：
http://www.qdfuns.com/notes/13457/2212f3d3af79179f3275dc5b7c0282e3.html
最终演示如下【点击观看在线地址演示】：
完整代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
  <Meta charset="UTF-8">
  <Meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
  <Meta name="format-detection" content="telephone=no"/>
  <title>使用ng仿写支付宝密码框</title>
  <style>
    *{ margin: 0; padding: 0;}
    .t{ margin-left: 100px;}
    .pass-form{position:relative;top:20px; left: 50px; width:100%;}
    .pass-form .pass-input{position:absolute;top:0;height:75px;line-height:75px;font-size:14px;color:#000;opacity:0;Box-shadow:none}
    .pass-form .pass-border-Box{position:absolute;top:0;font-size:0}
    .pass-form .pass-border-Box .faguang{position:absolute;top:0;left:0;z-index:9;Box-shadow:0 0 8px rgba(60,100,.6);width:75px;height:75px;background:#fff;opacity:0}
    .pass-form .pass-border-Box .pass-border{display:inline-block;position:relative;z-index:10;width:75px;height:75px;border:solid 1px #dcdcdc;border-left:none;-webkit-Box-sizing:border-Box;Box-sizing:border-Box}
    .pass-form .pass-border-Box .pass-border:first-child{border-left:solid 1px #dcdcdc}
    .pass-form .pass-border-Box .pass-border.active{background:url(../img/icons/icon_guangbiao.gif) no-repeat center center #fff}
    .pass-form .pass-border-Box .pass-border i{display:block;margin:0 auto;margin-top:22px;width:20px;height:20px;border-radius:100%}
  </style>
</head>
<body ng-app="demo" ng-controller="pageCtrl">
 
<div class="t">ng仿写支付宝密码框</div>
 
<form class="pass-form" name="pass_form" novalidate pass-form>
  <label for="pass">
    <input class="pass-input Jpass" type="tel" name="pass" id="pass" autocomplete="off" ng-model="pass" required maxlength="6" />
 
    <div class="pass-border-Box">
      <span class="pass-border"><i>dot</i></span>
      <span class="pass-border"><i>dot</i></span>
      <span class="pass-border"><i>dot</i></span>
      <span class="pass-border"><i>dot</i></span>
      <span class="pass-border"><i>dot</i></span>
      <span class="pass-border"><i>dot</i></span>
      <div class="faguang Jfaguang"></div>
    </div>
  </label>
</form>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
  var app=angular.module('demo',[]);
  app.controller('pageCtrl',function($scope,$interval,$http,$q){
    $scope.pass='';
//    $interval(function(){
//      console.log('定时检查：'+$scope.pass);
//    },5000);
  })
    .directive('passForm',function($http){
      return {
        restrict: 'EA',link: function(scope,ele,attr){
          var inputDom=angular.element(ele[0].querySelector('.Jpass'));//密码框
          var spanDoms=ele.find('span');//光标span
          var faguang=angular.element(ele[0].querySelector('.Jfaguang'));//发光外框
          var that=this;
          inputDom.on('focus blur keyup',function(e){
            e=e? e : window.event;
            e.stopPropagation();
 
            console.log('value len:'+this.value.length);
            console.log(e.type);
            if(e.type==='focus'){
              var _currFocusInputLen=this.value.length===6? 5 : this.value.length;
              spanDoms.eq(_currFocusInputLen).addClass('active');
              faguang.css({left: _currFocusInputLen * 75+'px',opacity: 1});
            }else if(e.type==='blur'){
              var _currBlurInputLen = this.value.length;
              spanDoms.eq(_currBlurInputLen).removeClass('active');
              faguang.css({opacity: 0});
            }else if(e.type==='keyup'){
              //console.log(this.value);
              //键盘上的数字键按下才可以输入
              if(e.keyCode == 8 || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)){
                var curInputLen = this.value.length;//输入的文本内容长度
                for (var j = 0; j < 6; j++) {
                  spanDoms.eq(j).removeClass('active');
                  spanDoms.eq(curInputLen).addClass('active');
                  spanDoms.eq(curInputLen - 1).next().find('i').css({backgroundColor: 'transparent'});
                  spanDoms.eq(curInputLen - 1).find('i').css({backgroundColor: '#000'});
                  faguang.css({
                    left: curInputLen * 75 + 'px'
                  });
                }
                if (curInputLen === 0) {
                  spanDoms.find('i').css({backgroundColor: 'transparent'});
                }
                if (curInputLen === 6) {
                  spanDoms.eq(5).addClass('active');
                  faguang.css({
                    left: '375px'
                  });
                  //直接发起密码验证
                  var doSubmitCallback=function(){
                    scope.pass='';
                    spanDoms.find('i').css({backgroundColor: 'transparent'});
                    spanDoms.removeClass('active').eq(0).addClass('active');
                    faguang.css({
                      left: '0'
                    });
                  };
//                  $http.get('http://xxxx/test.PHP?pass='+this.value)
//                    .success(function(res){
//                      console.log(res);
//                      if(res.status){
//                        doSubmitCallback();
//                        console.log(that.value+'-----');
//                      }else{
//                        doSubmitCallback();
 
//                      }
//                    });
                }
              }else{
                this.value = this.value.replace(/\D/g,'');
              }
 
            }
          });
        }
      }
    });
</script>
</body>
</html>
angular仿支付宝密码框

猜你在找的Angularjs相关文章
