mobie-web开发6位支付密码验证补充

最新推荐文章于 2019-03-06 14:58:31 发布

左钦杨

最新推荐文章于 2019-03-06 14:58:31 发布

阅读量777

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/sinat_29843547/article/details/51697258

版权

web前端专栏收录该内容

100 篇文章 1 订阅

订阅专栏

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">&nbsp</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();

这里写图片描述

左钦杨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
mobie-web开发6位支付密码验证补充

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" compi
复制链接

扫一扫