溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
項目需求，使用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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
