项目需求,使用ng写一个密码框格子支付模块,一开始使用一个输入+字母间距来分割字符,但是发现间距非常不好控制,随着字符的输入文本框字符串间距还会自动调整。最终从网上查找到一款金桥仿支付宝密码输入框,于是我模仿编写了个指令模块。
效果如下:
完整代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt;头lang=癳n”比;
& lt;元charset=皍tf - 8”比;
& lt; meta name=" viewport "
内容="宽度=设备宽度,user-scalable=不,初始=1.0,最大范围=1.0,最小规模=1.0”比;
& lt;元名称=癴ormat-detection”内容=暗缁?不”/比;
& lt; title>使用ng仿写支付宝密码框& lt;/title>
& lt; style>
*{保证金:0;填充:0;}
.t {margin-left: 100 px;}
.pass-form{:相对;:20 px;左:50 px;宽度:100%;}
.pass-form .pass-input{:绝对;:0;高度:75 px;行高:75 px;字体大小:14 px;颜色:# 000;不透明度:0;不必:没有}
.pass-form .pass-border-box{:绝对;:0;字体大小:0}
.pass-form .pass-border-box .faguang{:绝对;:0;左:0;z - index: 9;不必:0 0 8 px rgba(60100100 6),宽度:75 px;高度:75 px;背景:# fff;不透明度:0}
.pass-form .pass-border-box .pass-border{显示:inline-block;位置:相对;z - index: 10;宽度:75 px;高度:75 px;边界:固体1 px # dcdcdc; border-left:没有,-webkit-box-sizing: border-box; box-sizing: border-box}
.pass-form .pass-border-box .pass-border:第一个孩子{border-left:固体1 px # dcdcdc}
.pass-form .pass-border-box .pass-border.active{背景:url (. ./img/图标/icon_guangbiao.gif)没有重演中心中心# fff}
.pass-form .pass-border-box .pass-border我{显示:块;保证金:0汽车;margin-top: 22 px;宽度:20 px;高度:20 px; border - radius: 100%}
& lt;/style>
& lt;/head>
& lt;身体ng-app=把菔尽眓g-controller=皃ageCtrl”比;
& lt; div类=皌”祝辞ng仿写支付宝密码框& lt;/div>
& lt;形式类="把表" name=皃ass_form”已经pass-form>
& lt;标签=巴ü北?
& lt;输入class="传递输入Jpass”类型=皌el”名称="通过" id=巴ü弊远瓿?肮乇铡眓g-model=巴ü彼璧淖畲蟪ざ??”/比;
& lt; div类=皃ass-border-box”比;
& lt;跨类=" pass-border "祝辞& lt; i> dot & lt;/span>
& lt;跨类=" pass-border "祝辞& lt; i> dot & lt;/span>
& lt;跨类=" pass-border "祝辞& lt; i> dot & lt;/span>
& lt;跨类=" pass-border "祝辞& lt; i> dot & lt;/span>
& lt;跨类=" pass-border "祝辞& lt; i> dot & lt;/span>
& lt;跨类=" pass-border "祝辞& lt; i> dot & lt;/span>
& lt; div class=" faguang Jfaguang”祝辞& lt;/div>
& lt;/div>
& lt;/label>
& lt;/form>
& lt;脚本src=" http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js "祝辞& lt;/script>
& lt; script>
应用var=角。模块(“演示”,[]);
app.controller (pageCtrl,函数(http、美元范围、美元区间,q) {
$ scope.pass=?//美元区间(函数(){//console.log(“定时检查:' + scope.pass美元);//},5000);
}）
.directive (passForm,函数(http) {
返回{
限制:“EA”,
链接:函数(范围、避署attr) {
var inputDom=angular.element(避署[0].querySelector (' .Jpass '));//密码框
var spanDoms=ele.find(跨度);//光标
var faguang=angular.element(避署[0].querySelector (' .Jfaguang '));//发光外框
var=这个;
inputDom。(焦点模糊弹起,函数(e) {
e=e # 63;艾凡:window.event;
e.stopPropagation ();
控制台。日志(“价值len:”+ this.value.length);
console.log (e.type);
如果(e.type===肮刈ⅰ?{
var _currFocusInputLen=this.value.length===6 & # 63;5:this.value.length;
spanDoms.eq (_currFocusInputLen) .addClass(“活跃的”);
faguang。css({左:_currFocusInputLen * 75 +“px”,不透明度:1});
}else if (e.type===：?{
var _currBlurInputLen=this.value.length;
spanDoms.eq (_currBlurInputLen) .removeClass(“活跃的”);
faguang。css({不透明度:0});
}else if (e.type===暗稹?{//console.log (this.value);//键盘上的数字键按下才可以输入
如果(e。键码==8 | | (e。键码祝辞=48,,e。键码& lt;=57) | | (e。键码祝辞=96,,e。键码& lt;=105)) {
var curInputLen=this.value.length;//输入的文本内容长度
(var j=0;j & lt;6;j + +) {
spanDoms.eq (j) .removeClass(“活跃的”);
spanDoms.eq (curInputLen) .addClass(“活跃的”);
spanDoms。eq (curInputLen - 1) . next();(“我”)。css({写成backgroundColor:‘透明’});
spanDoms。eq (curInputLen - 1);(“我”)。css({写成backgroundColor:“# 000});
faguang.css ({
左:curInputLen * 75 +“px”
});
}
如果(curInputLen===0) {
spanDoms.find(“我”)。css({写成backgroundColor:‘透明’});
}
如果(curInputLen===6) {
spanDoms.eq (5) .addClass(“活跃的”);
faguang.css ({
左:“375 px”
});//直接发起密码验证
var doSubmitCallback=function () {
scope.pass=";
spanDoms.find(“我”)。css({写成backgroundColor:‘透明’});
spanDoms.removeClass(“活跃的”).eq (0) .addClass(“活跃的”);
faguang.css ({
左:“0”
});
};//美元http.get (' http://xxxx/test.php& # 63;通过=' + this.value)//.success(函数(res) {//console.log (res);//如果(res.status) {//doSubmitCallback ();//console.log (that.value + '——');//其他}{//doSubmitCallback ();//}//});
}
其他}{
这一点。值=https://www.yisu.com/zixun/this.value.replace (/D/g,”);
}
}
});
}
}
});
& lt;/script>
& lt;/body>
& lt;/html>
