收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

angular仿支付寶密碼框輸入效果

項目需求,使用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 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> 

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持積木網。

使用vue.js寫一個tab選項卡效果
通常我們寫tab選項卡的時候,一般都是用jq等去操作dom,給同級元素移除active類,然后,給被點擊元素添加active類,但是在vue.js中,我們能不去操作dom我們就盡量

vue中用動態組件實現選項卡切換效果
最近在研究vue的路上,那么今天也算個學習筆記吧!導航按鈕:divclass="tab-title"[email protected]="a='tab1'"router-linkto='/collectnewcars'新車/router-linkem/em/[email protected]="a='tab2'"rout

vue2.0實戰之使用vue-cli搭建項目(2)
Vue-cli是官方推薦的快速構建單頁應用的腳手架。官方給的建議,如果你是初次嘗試Vue,哪就老老實實用普通的書寫引入js文件,這里牽扯太多的東西,

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
上海时时乐基本走势综合版