html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<!--略掉一部分代码-->
<div id="popup" compile="popup.content"></div>
<input id="setpassword" maxlength="6" class="password-input" type="tel" ng-model="setpassword" />
<input id="resetpassword" maxlength="6" class="password-input" type="tel" ng-model="resetpassword" />
<input id="inputpassword" maxlength="6" class="password-input" type="tel" ng-model="inputpassword" />
<div id="actionsheet" class="actionsheet hidden">
<div class="actionchoices">
<div class="fieldset">
<div>工作时间:每天9:00-22:00</div>
<a href="tel:4006892227" class="caution">呼叫 400-689-2227</a>
</div>
<a href="javascript:void(0);" ng-click="hideActionSheet()" class="redButton dismiss">取消</a>
</div>
</div>
</div>
</body>
<script>
$(function(){
$("#inputpassword").on('input',function(e){
if($('#inputpassword').val().length==6){
var appElement = document.querySelector('[ng-controller=paymentAccountCtrl]');
var $scope = angular.element(appElement).scope();
$scope.$apply(function(scope){scope.validatePassword('account')});
}
})
$("#resetpassword").on('input',function(e){
if($('#resetpassword').val().length==6&&$('#setpassword').val().length==6){
var appElement = document.querySelector('[ng-controller=paymentAccountCtrl]');
var $scope = angular.element(appElement).scope();
$scope.$apply(function(scope){scope.eabledPopupButton()});
}
})
})
$('#popup').bind("DOMSubtreeModified", function() {
var changePasswordStatus = function(divclass,inputid,olddivclass){
$(divclass).click(function(e){
$(olddivclass).removeClass('password-border-on');
$(divclass).addClass('password-border-on');
$(inputid).focus();
})
$(inputid).on('input',function(e){
$(divclass+' div img').each(function(e){
if(e<$(inputid).val().length){
$(this).removeClass('hidden');
}
if($(inputid).val().length<(6-$(divclass+' div img.hidden').length)){
$($(divclass+' div img')[$(inputid).val().length]).addClass('hidden');
}
})
})
}
changePasswordStatus('.setpassword','#setpassword','.resetpassword');
changePasswordStatus('.resetpassword','#resetpassword','.setpassword');
changePasswordStatus('.inputpassword','#inputpassword','.setpassword');
$('.password-div').height($('.password-div').width()*82/88);
$('.password-label').css('line-height',$('.password-div').height()+'px');
$('.popup-window').css('margin-top','-'+($('.popup-window').height()/2).toString()+'px');
if($('.popup-window').width()>=640){
$('.popup-window').css('margin-left','-320px');
}
$('.inputpassword').addClass('password-border-on');
$('.setpassword').addClass('password-border-on');
});
</script>
</html>
css略
弹窗dom
var content = '<div class="popup-cover">';
content += '</div>';
content += '<div class="popup-window">';
content += '<div class="popup">';
content += '<span class="poopup-cancel" ng-click="closePopup()"><img width="22" src="images/close-popup-icon.png" /></span>';
content += '<div class="popup-title text-center padding-vertical">';
content += '<p class="font-20">设置6位支付密码</p></div>';
content += '<p class="color-red font-12 text-center">{{passwordMsg}}</p>';
content += '<div class="form-group pure-u-g password-group">';
content += '<p class="pure-u-3-24 text-center font-16 color-9 password-label">设置</p>';
content += '<div class="pure-u-21-24 setpassword password-border">';
content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="images/pay-ios-password-type.png" /></div>';
content += '<div class="pure-u-1-6 text-center password-div border-left"><img class="hidden" width="100%" src="images/pay-ios-password-type.png" /></div>';
content += '<div class="pure-u-1-6 text-center password-div border-left"><img class="hidden" width="100%" src="images/pay-ios-password-type.png" /></div>';
content += '<div class="pure-u-1-6 text-center password-div border-left"><img class="hidden" width="100%" src="images/pay-ios-password-type.png" /></div>';
content += '<div class="pure-u-1-6 text-center password-div border-left"><img class="hidden" width="100%" src="images/pay-ios-password-type.png" /></div>';
content += '<div class="pure-u-1-6 text-center password-div border-left"><img class="hidden" width="100%" src="images/pay-ios-password-type.png" /></div>';
content += '</div>';
content += '</div>';
content += '<div class="form-group pure-u-g password-group">';
content += '<p class="pure-u-3-24 text-center font-16 color-9 password-label">确认</p>';
content += '<div class="pure-u-21-24 resetpassword password-border">';
content += '<div class="pure-u-1-6 text-center password-div"><img class="hidden" width="100%" src="images/pay-ios-password-type.png" /></div>';
content += '<div class="pure-u-1-6 text-center password-div border-left"><img class="hidden" width="100%" src="images/pay-ios-password-type.png" /></div>';
content += '<div class="pure-u-1-6 text-center password-div border-left"><img class="hidden" width="100%" src="images/pay-ios-password-type.png" /></div>';
content += '<div class="pure-u-1-6 text-center password-div border-left"><img class="hidden" width="100%" src="images/pay-ios-password-type.png" /></div>';
content += '<div class="pure-u-1-6 text-center password-div border-left"><img class="hidden" width="100%" src="images/pay-ios-password-type.png" /></div>';
content += '<div class="pure-u-1-6 text-center password-div border-left"><img class="hidden" width="100%" src="images/pay-ios-password-type.png" /></div>';
content += '</div>';
content += '<p class="font-12 color-blue line-height-16 text-right"> </p>';
content += '</div>';
content += '<div class="pupup-button-div">';
content += '<button id="popup-button" ng-disabled="popupButtonDisabled==1" ng-click="popupButtonDisabled==1||setPassword(\''+type+'\')" class="btn full-width pupup-button-disabled font-20 disabled">确定</button></div>';
content += '</div>';
content += '</div>';
$scope.showPopup(content);
$('#setpassword').focus();