登录时拒绝浏览器记录密码的处理方式

最新推荐文章于 2024-06-14 10:30:42 发布

ty_oldman

最新推荐文章于 2024-06-14 10:30:42 发布

阅读量118

点赞数

分类专栏：小项目大智慧文章标签： js jquery

本文链接：https://blog.csdn.net/ty_oldman/article/details/117129889

版权

小项目大智慧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何使用JavaScript防止浏览器自动保存密码的功能，并分享了一段实现代码。然而，这种方法存在一个问题，即当用户输入密码速度过快时可能导致密码不完整，影响登录。博主介绍了输入焦点处理和密码转换为星号显示的步骤，同时也指出了需要进一步完善的方面。

摘要由CSDN通过智能技术生成

最近做项目时，发现一个很有趣的一个问题，浏览器会提示并保存密码，网上也查看很多解决方法，借鉴并实现了避免浏览器保存密码，但是有个小缺点就是输入密码过快时，会导致密码不完整从而登录失败，有待完善。
第一步：处理输入焦点。
第二步：密码输入时记录同时转换成星号显示

焦点处理实现代码（网摘）：

(function ($, undefined) {
    $.fn.getCursorPosition = function () {
        var el = $(this).get(0);
        var pos = 0;
        if ('selectionStart' in el) {
            pos = el.selectionStart;
        } else if ('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        return pos;
    };
    $.fn.setCursorPosition = function (position) {
        if (this.length == 0) return this;
        return $(this).setSelection(position, position);
    }

    $.fn.setSelection = function (selectionStart, selectionEnd) {
        if (this.length == 0) return this;
        input = this[0];

        if (input.createTextRange) {
            var range = input.createTextRange();
            range.collapse(true);
            range.moveEnd('character', selectionEnd);
            range.moveStart('character', selectionStart);
            range.select();
        } else if (input.setSelectionRange) {
            input.focus();
            input.setSelectionRange(selectionStart, selectionEnd);
        }

        return this;
    };

    $.fn.focusEnd = function () {
        this.setCursorPosition(this.val().length);
        return this;
    };
})(jQuery);

   密码输入转换星号

 $("#pwd").val("").on({
            input: function (e) {
                e.preventDefault();
                e.stopPropagation();
            },
            property: function (e) {
                e.preventDefault();
                e.stopPropagation();
            },
            paste: function (e) {
                e.preventDefault();
                e.stopPropagation();
            },
            keyup: function (e) {
                //获取输入密码字符串
                var value = $(this).val()
                //获取光标位置
                var index = $(this).getCursorPosition();
                //获取真实密码字符串长度
                var len = $this.pwdStr.length;
                //获取输入密码字符串长度
                var _len = value.length;
                //明文密码临时变量
                var newStr = "";
                //输入密码长度增加时
                if (_len >= len) {
                    var _char = "";
                    var _charIndex = -1;
                    //截取输入的密码字符
                    for (var i = 0; i < _len; i++) {
                        if (value[i] != "*") {
                            _char = value[i];
                            _charIndex = i;
                            break;
                        }
                    }
                    //光标在末尾，真实密码追加输入字符
                    if (_charIndex == len) {
                        $this.pwdStr += _char;
                    }
                    else {
                        //关标不在末尾，真实密码插入字符
                        for (var i = 0; i < len; i++) {
                            if (i == _charIndex) {
                                newStr += _char;
                            }
                            newStr += $this.pwdStr[i];
                        }
                        $this.pwdStr = newStr;
                    }

                }
                else {
                    //当密码长度减小时,从真实密码中截取
                    for (var i = 0; i < len; i++) {
                        if (index < 0) {
                            newStr += pwdStr[i];
                            continue;
                        }
                        else {
                            if (index == i) {
                                continue;
                            }
                            newStr += $this.pwdStr[i];
                        }
                    }
                    $this.pwdStr = newStr;
                }
                $(this).val(value.replace(/./g, "*"));//输入密码转换成星号  
            }
        });