拼团小程序哪个好_angular仿支付宝密码框输入效果

2021-01-12 12:40

angular仿支付宝密码框输入效果       本篇文章主要介绍了angular仿支付宝密码框输入效果,详细的介绍了使用ng写一个密码框格子支付模块,具有一定的参考价值,有兴趣的可以了解一下。

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

效果如下:

完整代码如下:

 !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,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 ng仿写支付宝密码框 /div 
 form name="pass_form" novalidate pass-form 
 label for="pass" 
 input type="tel" name="pass" id="pass" plete="off" ng-model="pass" required maxlength="6" / 
 div 
 span i dot /i /span 
 span i dot /i /span 
 span i dot /i /span 
 span i dot /i /span 
 span i dot /i /span 
 span i dot /i /span 
 div /div 
 /div 
 /label 
 /form 
 script src="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 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('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 

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




扫描二维码分享到微信

在线咨询
联系电话

020-66889888