項(xiàng)目需求,使用ng寫一個(gè)密碼框格子支付模塊,一開始使用一個(gè)input+letter-spacing來分割字符,但是發(fā)現(xiàn)間距非常不好控制,隨著字符的輸入文本框字符串間距還會(huì)自動(dòng)調(diào)整。最終從網(wǎng)上查找到一款jq仿支付寶密碼輸入框,于是我模仿編寫了個(gè)指令模塊。
效果如下:
完整代碼如下:
<!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 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('定時(shí)檢查:'+$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');//光標(biāo)span var faguang=angular.element(ele[0].querySelector('.Jfaguang'));//發(fā)光外框 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); //鍵盤上的數(shù)字鍵按下才可以輸入 if(e.keyCode == 8 || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)){ var curInputLen = this.value.length;//輸入的文本內(nèi)容長度 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' }); //直接發(fā)起密碼驗(yàn)證 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>
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站jinyejixie.com,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
分享標(biāo)題:angular仿支付寶密碼框輸入效果-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明:http://jinyejixie.com/article8/dpdeip.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站排名、網(wǎng)站改版、營銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容