模拟移动端密码输入显隐效果

最新推荐文章于 2022-02-24 11:38:58 发布

changshenglugu

最新推荐文章于 2022-02-24 11:38:58 发布

阅读量861

点赞数

本文链接：https://blog.csdn.net/changshenglugu/article/details/49156161

版权

//此文的重点在“模拟移动端动态输入密码效果”，说明稍后再加上。另外没做到动态传递变量，在函数内部操作动态全局变量

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>user_changepwd</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
    <h1>Change Password</h1>
    <form class="changepwd-form">
        <label>Current Password</label>
        <input type="password" style="display:none"/>
        <input id="txtCurrentPwd" type="password" class="changepwd-input" />
        <p>In order to proceed, your current password is required to</p>
        <p style="padding-top:0;">identify the ownership of this account.</p>
        <label class="labels">New Password</label>
        <input id="txtNewPwd" type="password" class="changepwd-input" />
        <p>At least 8 characters</p>
        <label>Confirm Password</label>
        <input id="txtConfirmPwd" type="password" class="changepwd-input" />
        <input id="btnResetPwd" οnclick="funcResetPwd()" type="button" value="Reset Password" class="changepwd-submit" />
    </form>
    <script>
        //检查格式
        function checkIsWhiteSpace(text, whichBlank, maxLen, isDefaultValue) {
            if (text == undefined || text.length < 1) {
                alert('Please ensure "' + whichBlank + '" are filled.');
                return false;
            }
            //检查文本长度
            if (-1 != maxLen) {
                if (text.length >= maxLen) {
                    alert('Please ensure "' + whichBlank + '"length is less than ' + maxLen);
                    return false;
                }
            }
            //检查文本是否是默认值
            if ('notCheckDefultValue' != isDefaultValue) {
                if (text.indexOf(isDefaultValue) != -1) {
                    alert('Please ensure the format of"' + whichBlank + '" is right.');
                    return false;
                }
            }
            return true;
        }

        //模拟移动端动态输入密码效果
        var hidetxtCurrentPwd;
        var hidetxtNewPwd;
        var hidetxtConfirmPwd;
        function convertPwd(txtValue, inputId) {
            if (txtValue != undefined && txtValue != null && '' != txtValue) {
                var valLen = txtValue.length;
                var arrPwd = [];
                for (var i = 0; i < valLen - 1; i++) {
                    arrPwd.push('*');
                }
                var strShowPwd = arrPwd.join('');
                strShowPwd += txtValue.substr(valLen - 1);
                $('#' + inputId).val(strShowPwd);
                setTimeout(function () {
                    var maskPwd = generateMaskoffCode(valLen);
                    if ($('#' + inputId).val().length == valLen) {
                        $('#' + inputId).val(maskPwd);
                    }
                }, 500);
            }


        }
        function generateMaskoffCode(len) {
            var arrPwd = [];
            for (var i = 0; i < len; i++) {
                arrPwd.push('*');
            }
            return arrPwd.join('');
        }
        $(document).ready(function () {
            $('#txtCurrentPwd').attr('type', 'text');
            $('#txtNewPwd').attr('type', 'text');
            $('#txtConfirmPwd').attr('type', 'text');
            $('#txtCurrentPwd').on('input', function (e) {
                var txtValue = $(this).val();
                if ('undefined' == typeof (hidetxtCurrentPwd)) {
                    hidetxtCurrentPwd = txtValue;
                } else {
                    if (undefined != txtValue) {
                        var indexHidePwd = hidetxtCurrentPwd.length;
                        var indexShowPwd = txtValue.length;
                        if (indexHidePwd < indexShowPwd) {
                            hidetxtCurrentPwd += txtValue.substr(indexHidePwd);
                        } else if (indexHidePwd > indexShowPwd) {
                            hidetxtCurrentPwd = hidetxtCurrentPwd.substr(0, indexShowPwd);
                        }
                    } else {
                        hidetxtCurrentPwd = undefined;
                    }
                }
                convertPwd(txtValue, 'txtCurrentPwd');

            });
            $('#txtNewPwd').on('input', function (e) {
                var txtValue = $(this).val();
                if ('undefined' == typeof (hidetxtNewPwd)) {
                    hidetxtNewPwd = txtValue;
                } else {
                    if (undefined != txtValue) {
                        var indexHidePwd = hidetxtNewPwd.length;
                        var indexShowPwd = txtValue.length;
                        if (indexHidePwd < indexShowPwd) {
                            hidetxtNewPwd += txtValue.substr(indexHidePwd);
                        } else if (indexHidePwd > indexShowPwd) {
                            hidetxtNewPwd = hidetxtNewPwd.substr(0, indexShowPwd);
                        }
                    } else {
                        hidetxtNewPwd = undefined;
                    }
                }
                convertPwd(txtValue, 'txtNewPwd');
            });
            $('#txtConfirmPwd').on('input', function (e) {
                var txtValue = $(this).val();
                if ('undefined' == typeof (hidetxtConfirmPwd)) {
                    hidetxtConfirmPwd = txtValue;
                } else {
                    if (undefined != txtValue) {
                        var indexHidePwd = hidetxtConfirmPwd.length;
                        var indexShowPwd = txtValue.length;
                        if (indexHidePwd < indexShowPwd) {
                            hidetxtConfirmPwd += txtValue.substr(indexHidePwd);
                        } else if (indexHidePwd > indexShowPwd) {
                            hidetxtConfirmPwd = hidetxtConfirmPwd.substr(0, indexShowPwd);
                        }
                    } else {
                        hidetxtConfirmPwd = undefined;
                    }
                }
                convertPwd(txtValue, 'txtConfirmPwd');
            });
        });
    </script>
</body>
</html>