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


Posted in Javascript onMarch 25, 2017

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

效果如下:

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

完整代码如下:

<!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>

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

Javascript 相关文章推荐
js 覆盖和重载 函数
Sep 25 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 #jQuery
axios基本入门用法教程
Mar 25 #Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 #Javascript
ECMAScript6 新特性范例大全
Mar 24 #Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 #Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 #jQuery
Node.js和Express简单入门介绍
Mar 24 #Javascript
You might like
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
php下使用以下代码连接并测试
2008/04/09 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
Python做简单的字符串匹配详解
2017/03/21 Python
python中requests库session对象的妙用详解
2017/10/30 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
利用python开发app实战的方法
2019/07/09 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
本科生详细的自我评价
2013/09/19 职场文书
房地产促销活动方案
2014/03/01 职场文书
授权委托书怎么写
2014/04/03 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python