当前位置：Gxlcms > JavaScript > angular仿支付宝密码框输入效果

angular仿支付宝密码框输入效果

时间：2021-07-01 10:21:17 帮助过：8人阅读

项目需求，使用ng写一个密码框格子支付模块，一开始使用一个input+letter-spacing来分割字符，但是发现间距非常不好控制，随着字符的输入文本框字符串间距还会自动调整。最终从网上查找到一款jq仿支付宝密码输入框，于是我模仿编写了个指令模块。

效果如下：

完整代码如下：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"> 
  4.  <meta charset="UTF-8"> 
  5.  <meta name="viewport" 
  6.     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
  7.  <meta name="format-detection" content="telephone=no"/> 
  8.  <title>使用ng仿写支付宝密码框</title> 
  9.  <style> 
  10.   *{ margin: 0; padding: 0;} 
  11.   .t{ margin-left: 100px;} 
  12.   .pass-form{position:relative;top:20px; left: 50px; width:100%;} 
  13.   .pass-form .pass-input{position:absolute;top:0;height:75px;line-height:75px;font-size:14px;color:#000;opacity:0;box-shadow:none} 
  14.   .pass-form .pass-border-box{position:absolute;top:0;font-size:0} 
  15.   .pass-form .pass-border-box .faguang{position:absolute;top:0;left:0;z-index:9;box-shadow:0 0 8px rgba(60,100,100,.6);width:75px;height:75px;background:#fff;opacity:0} 
  16.   .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} 
  17.   .pass-form .pass-border-box .pass-border:first-child{border-left:solid 1px #dcdcdc} 
  18.   .pass-form .pass-border-box .pass-border.active{background:url(../img/icons/icon_guangbiao.gif) no-repeat center center #fff} 
  19.   .pass-form .pass-border-box .pass-border i{display:block;margin:0 auto;margin-top:22px;width:20px;height:20px;border-radius:100%} 
  20.  </style> 
  21. </head> 
  22. <body ng-app="demo" ng-controller="pageCtrl"> 
  23.  
  24. <div class="t">ng仿写支付宝密码框</div> 
  25.  
  26. <form class="pass-form" name="pass_form" novalidate pass-form> 
  27.  <label for="pass"> 
  28.   <input class="pass-input Jpass" type="tel" name="pass" id="pass" autocomplete="off" ng-model="pass" required maxlength="6" /> 
  29.  
  30.   <div class="pass-border-box"> 
  31.    <span class="pass-border"><i>dot</i></span> 
  32.    <span class="pass-border"><i>dot</i></span> 
  33.    <span class="pass-border"><i>dot</i></span> 
  34.    <span class="pass-border"><i>dot</i></span> 
  35.    <span class="pass-border"><i>dot</i></span> 
  36.    <span class="pass-border"><i>dot</i></span> 
  37.    <div class="faguang Jfaguang"></div> 
  38.   </div> 
  39.  </label> 
  40. </form> 
  41. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
  42. <script> 
  43.  var app=angular.module('demo', []); 
  44.  app.controller('pageCtrl', function($scope, $interval, $http, $q){ 
  45.   $scope.pass=''; 
  46. //  $interval(function(){ 
  47. //   console.log('定时检查：'+$scope.pass); 
  48. //  }, 5000); 
  49.  }) 
  50.   .directive('passForm', function($http){ 
  51.    return { 
  52.     restrict: 'EA', 
  53.     link: function(scope, ele, attr){ 
  54.      var inputDom=angular.element(ele[0].querySelector('.Jpass'));//密码框 
  55.      var spanDoms=ele.find('span');//光标span 
  56.      var faguang=angular.element(ele[0].querySelector('.Jfaguang'));//发光外框 
  57.      var that=this; 
  58.      inputDom.on('focus blur keyup', function(e){ 
  59.       e=e? e : window.event; 
  60.       e.stopPropagation(); 
  61.  
  62.       console.log('value len:'+this.value.length); 
  63.       console.log(e.type); 
  64.       if(e.type==='focus'){ 
  65.        var _currFocusInputLen=this.value.length===6? 5 : this.value.length; 
  66.        spanDoms.eq(_currFocusInputLen).addClass('active'); 
  67.        faguang.css({left: _currFocusInputLen * 75+'px', opacity: 1}); 
  68.       }else if(e.type==='blur'){ 
  69.        var _currBlurInputLen = this.value.length; 
  70.        spanDoms.eq(_currBlurInputLen).removeClass('active'); 
  71.        faguang.css({opacity: 0}); 
  72.       }else if(e.type==='keyup'){ 
  73.        //console.log(this.value); 
  74.        //键盘上的数字键按下才可以输入 
  75.        if(e.keyCode == 8 || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)){ 
  76.         var curInputLen = this.value.length;//输入的文本内容长度 
  77.         for (var j = 0; j < 6; j++) { 
  78.          spanDoms.eq(j).removeClass('active'); 
  79.          spanDoms.eq(curInputLen).addClass('active'); 
  80.          spanDoms.eq(curInputLen - 1).next().find('i').css({backgroundColor: 'transparent'}); 
  81.          spanDoms.eq(curInputLen - 1).find('i').css({backgroundColor: '#000'}); 
  82.          faguang.css({ 
  83.           left: curInputLen * 75 + 'px' 
  84.          }); 
  85.         } 
  86.         if (curInputLen === 0) { 
  87.          spanDoms.find('i').css({backgroundColor: 'transparent'}); 
  88.         } 
  89.         if (curInputLen === 6) { 
  90.          spanDoms.eq(5).addClass('active'); 
  91.          faguang.css({ 
  92.           left: '375px' 
  93.          }); 
  94.          //直接发起密码验证 
  95.          var doSubmitCallback=function(){ 
  96.           scope.pass=''; 
  97.           spanDoms.find('i').css({backgroundColor: 'transparent'}); 
  98.           spanDoms.removeClass('active').eq(0).addClass('active'); 
  99.           faguang.css({ 
  100.            left: '0' 
  101.           }); 
  102.          }; 
  103. //         $http.get('http://xxxx/test.php?pass='+this.value) 
  104. //          .success(function(res){ 
  105. //           console.log(res); 
  106. //           if(res.status){ 
  107. //            doSubmitCallback(); 
  108. //            console.log(that.value+'-----'); 
  109. //           }else{ 
  110. //            doSubmitCallback(); 
  111.  
  112. //           } 
  113. //          }); 
  114.         } 
  115.        }else{ 
  116.         this.value = this.value.replace(/\D/g,''); 
  117.        } 
  118.  
  119.       } 
  120.      }); 
  121.     } 
  122.    } 
  123.   }); 
  124. </script> 
  125. </body> 
  126. </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！