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

2024-12-15 18:57:01

项目需求，使用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>

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

JavaScript仿支付宝6位数字密码输入框

前几天,项目有个功能和某宝购物支付密码的输入框有点类似,就自己写了这篇博文,权当总结笔记吧. 啰嗦半天了,直接上代码: 结构层: <div> <div>请在下方输入6位数字</div> <div class="ipt-box-nick"> <input type="tel" maxlength="6" class="ipt-real-nick"/> <div c
Android自定义View仿支付宝输入六位密码功能

跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义view布局效果图及代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/
Android仿支付宝手势密码解锁功能

Starting 创建手势密码可以查看 CreateGestureActivity.java 文件. 登陆验证手势密码可以看 GestureLoginActivity.java 文件. Features 使用了 JakeWharton/butterknife butterknife 使用了 ACache 来存储手势密码 /** * 保存手势密码 */ private void saveChosenPattern(List<LockPatternView.Cell> cells) { byte[
Android仿支付宝、京东的密码键盘和输入框

首先看下效果图一:布局代码键盘由0~9的数字,删除键和完成键组成,也可以根据需求通过GridView适配器的getItemViewType方法来定义.点击键的时候背景有变色的效果. 密码输入框由六个EditText组成,每个输入框最对能输入一个数字,监听最后一个输入框来完成密码输入结束的监听. 二:键盘键盘中的主要逻辑处理,键盘样式,item的点击事件 @Override public int getViewTypeCount() { return 2; } @Override publi
Android 仿支付宝密码输入框效果

模仿支付宝输入效果,实现很简单,就是画个矩形框和圆形,其他的通过组合view来实现所有功能,虽然简单但是封装起来,方便以后使用,也分享一下,希望对别人也有点帮助. 1.如何使用,可以设置自己的进入退出动画,不设置则没有动画效果,自己觉得封装之后还是非常用好的. private MyInputPwdUtil myInputPwdUtil; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(sa
js仿支付宝多方框输入支付密码效果

上次看到别人说写一个类似支付宝支付密码的输入框效果,今天就想自己写了试试看,大体功能是实现了. 已实现部分: 1. 焦点会随着输入数值往后推移 2. 如果输入的非0-9,则会出现提示 3. 按Backspance回车可以对应格子焦点往前推移 4. 按回车或者点击按钮可以触发按钮点击事件,获得输入值未完善部分: 1. 在控制输入类型的时候,只有0-9.非0-9以及回车.回删几个键盘事件的区分,不够完善 2. 输入框用的input标签,password类型,会将输入值变成圆点,但是圆点太小不够美观
js仿支付宝填写支付密码效果实现多方框输入密码

不知道怎么描述标题,先看截图吧,大致的效果就是一个框输入一位密码. 最开始实现的思路是一个小方框就是一个type为password的input,每输入一位自动跳到下一位,删除一位就自动跳到前一位,android上是OK的,很平滑也没有bug,但是ios上会出现键盘频繁调起和关闭,非常影响用户体验.原因估计是每个input会不断的focus和blur,每次focus会调起键盘,blur又会关闭键盘,so....此方案肯定不行了. PM非要实现这种效果,木有办法~拗不过,一句用户体验不好会让你没话说
Android仿支付宝支付密码输入框

本文实例为大家分享了Android实现一个仿支付宝支付密码的输入框,主要实现如下: PasswordView.java package com.jackie.alipay.password; import android.annotation.TargetApi; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphic
JavaScript仿支付宝密码输入框

现在很多时候大家付款的场景都是在手机上面,而随着H5页面的开发变得越来越方便,很多场景也从客户端搬到了浏览器中,其中支付这个场景就很自然的被放在了浏览器中.那么这样的输入框大家一定不会陌生吧: 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签. 并且给这个5个input设置display: inline-block 属性,同时用<!- ->来消除元素直接的margin
Android仿支付宝微信支付密码界面弹窗封装dialog

一,功能效果二,实现过程 1,先写xml文件:dialog_keyboard.xml 注意事项 (1),密码部分用的是一个线性布局中6个TextView,并设置android:inputType="numberPassword",外框是用的一个有stroke属性的shape, (2),1-9数字是用的recycleview ,每个item的底部和右边有1dp的黑线,填充后形成分割线. (3),recycleview 要设置属性 android:overScrollMode=&quo

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

相关推荐

随机推荐