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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
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
一个简单的PHP投票程序源码
2007/03/11 PHP
常用的php ADODB使用方法集锦
2008/03/25 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[00:10]神之谴戒
2019/03/06 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
好的自荐信的要求
2013/10/30 职场文书
应届生护士求职信
2013/11/01 职场文书
任课老师推荐信范文
2013/11/24 职场文书
十佳护士先进事迹
2014/05/08 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL