防止浏览器记住密码手写password密码框实现禁止浏览器记住密码功能兼容谷歌火狐 IE8+阻止浏览器记住密码

72 阅读 0 评论 48 点赞

我是靠谱客的博主清新项链，最近开发中收集的这篇文章主要介绍防止浏览器记住密码手写password密码框实现禁止浏览器记住密码功能兼容谷歌火狐 IE8+阻止浏览器记住密码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

阻止浏览器记住密码

接了一个很无理的需求：禁止浏览器提示保存密码

最终解决方案在最下面，先絮叨两句

最终效果：

说说这个要怎么实现吧，网上搜索方法大部分都是说（方式如下）

设置 autocomplete为off 即可，亲测无效，最起码在谷歌老大型浏览器就不行。我是最想吐槽说这个方式的，也有的人说设置off不行还可以设置成除了off和on之外的其他的值即可，真的是很无语。明明是禁止浏览器保存密码，被问答成让浏览器不要自动填充，真是醉了
input输入框的type先是为text，当获得焦点时在将type设置成password，亲测无效，要知道浏览器地址上出现这个玩意，就是因为有password的输入框，所以，这个方式就像是掩耳盗铃
还有就是说什么添加readonly,获取焦点移除掉，能解决问题，but 我亲测无效
另一种说是在一个隐藏的password已达到让浏览器混淆记住空的密码，我是亲测无效，不知道你们测试是怎么测试的
加上上面所有的方法，包含还有一些这里没有举例的都无效而终

既然这些都不能被满足，那么自己写一个password的input把

手写password时遇到的问题

text可输入中文，怎么解决？

沟通一番之后，最终定下：中文就直接禁止掉，清空输入框的值，

实现方式当然是通过 compositionstart 和 compositionend 这两个事件检测中文输入的事件

当然IE8是不支持这两个事件的，怎么解决呢？针对IE8对input框添加一行样式 ime-mode：'disabled' 禁止输入中文

当然ime-mode不仅仅支持ie8，它对于IE和FF完全支持，唯一遗憾的就是谷歌居然不支持，真是很艹，为此我还特意去stackoverflow去看了下能否让谷歌也支持这个方法，很不幸，8年前就有人提问过，至今没人回答

            var flag = true
            $('#loginPass').on('compositionstart', function (e) {
                flag = false
                // alert('检测到您正在输入中文,已对您的操作进行禁止,请重新输入密码') 
            })
            $('#loginPass').on('compositionend', function (e) {
                if (!flag) {
                    e.target.value = ''
                    $('#loginPass').val('')
                    $('.password_text').css('paddingRight', '0px')
                }
                flag = true;
            })

输入的内容干脆不可见把，沟通一番，同意了。

于是直接把input的颜色改成和背景一样的颜色。完美！

各方都同意了后，突然Ctrl + A 全选文本框，内容被暴露出来了，尴尬。。。

怎么办？

脑子回路一想：阻止用户的Ctrl操作 + 禁止文本选中操作 即可

于是一顿操作猛如虎

function iEsc() { return false; }
function iRec() { return true; }
function DisableKeys() {
    if (event.ctrlKey || event.shiftKey || event.altKey) {
        window.event.returnValue = false;
        iEsc();
    }
}
document.ondragstart = iEsc;
document.onkeydown = DisableKeys;
document.oncontextmenu = iEsc;
if (typeof document.onselectstart != "undefined")
    document.onselectstart = iEsc;
else {
    document.onmousedown = iEsc;
    document.onmouseup = iRec;
}
function DisableRightClick(qsyzDOTnet) {
    if (window.Event) {
        if (qsyzDOTnet.which == 2 || qsyzDOTnet.which == 3)
            iEsc();
    }
    else
        if (event.button == 2 || event.button == 3) {
            event.cancelBubble = true
            event.returnValue = false;
            iEsc();
        }
}

才发现对于普通文本还行，但是对于输入框，无效，依然可以通过鼠标双击或点击输入框滑动选中文本。

没办法只能放弃这个方式，于是想到干脆在input上方定位一个元素来达到遮掩的过程。既然都要添加一个元素了，那就直接把弄小圆点代替密码文字吧。

            $('#loginPass').on('input propertychange', function () {
                setTimeout(function () {
                    if (flag) {
                        var password_text = ''
                        for (var i = 0; i < $('#loginPass').val().length; i++) {
                            password_text += '<i class="pass_i" style="display:inline-block;width:8px;height:13px;background-image:url(./image/index/pass.png);background-repeat:no-repeat;background-position:center 0;"></i>'
                        }
                        $('.password_text').html(password_text)
                    }
                }, 0)
                if ($('#loginPass').val() != '') {
                    $('.password_text').css('paddingRight', '15px')
                } else {
                    $('.password_text').css('paddingRight', '0px')
                }
            })

好了，密码也可以看见小圆点了，当然，需求是定在：input的光标不可见的情况下

input的光标不可见，我把input的颜色都与背景颜色设置成一样样的了，当然不可见，哈哈哈，没想到IE又出了毛病，

IE光标可见而且异常显示bug

发现IE是改变不了颜色的，至今还没有方法能实现，既然颜色不能改变，那么要从别的地方入手了，诶？我不是定位了一个元素在input上面吗，怎么没把它给遮住？神奇

于是调了下z-index，调到最大，也没能将它遮住，也罢另寻名医把。

然后脑子里就开始回想让元素隐藏的N+1种方式，最终定位在font-size上可行，当然一个非常有趣的事情就是：

input在ie中font-size为0并不影响value值，然而在其他浏览器如谷歌火狐中若设置font-size为0的话则无法对value进行输入值

那就只针对ie浏览器把，当然，我也是在这时才发现IE11不能通过 window.navigator.userAgent.indexOf('MSIE')！=-1 来判断

            function isIE() {
                if (!!window.ActiveXObject || "ActiveXObject" in window) {
                    return true;
                } else {
                    return false;
                }
            }
            if (isIE()) {
                $('#loginPass').css({ 'height': '38px', 'fontSize': '0', 'padding': '0', 'width': '75%' })
            }

正当我以为一切都OK的时候，又冒出了一个问题

当输入了些密码时，失去焦点在获取焦点后在输入或删除时，已删除不了之前第一次进来输入的值了，原因竟然是第二次再获取焦点时，输入框光标并不在最后一个输入的信息后面。还好很快发现并定位了这个问题，解决方式如下：

        function set_text_value_position(obj, spos) {
            var tobj = document.getElementById(obj);
            if (spos < 0)
                spos = tobj.value.length;
            if (tobj.setSelectionRange) { //兼容火狐,谷歌
                setTimeout(function () {
                    tobj.setSelectionRange(spos, spos);
                    tobj.focus();
                }, 0);
            } else if (tobj.createTextRange) { //兼容IE
                var rng = tobj.createTextRange();
                rng.move('character', spos);
                rng.select();
            }
        }
        function setInputCursorEnd() {
            if ($('#loginPass').val() != '') {
                set_text_value_position('loginPass', -1)
            }
        }

当然定位在input上方的元素要获得input的焦点是同一个方式

到了这里，就解决完了这个需求。

希望能帮助正在看的小伙伴~ 慢慢屡一下总会有办法解决的解决不了的就怼产品吧！

玩笑归玩笑这个需求对我进步还是很大的

最终解决方法实例代码：

样式可以自己调

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0
        }

        body {
            width: 600px;
            margin: 150px auto;
        }

        .posiRelative {
            width: 339px;
            height: 58px;
            position: relative;
            text-align: center;
        }

        #loginPass {
            margin-top: 20px;
            border: 1px solid #ccc;
            width: 70%;
            padding: 10px 10px;
        }

        .password_text {
            cursor: text;
            max-width: 200px;
            height: 24px;
            overflow: hidden;
            position: absolute;
            color: red;
            left: 51px;
            top: 31px;
            font-size: 18px;
            background-color: white;
        }
    </style>
</head>

<body>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>

        $(function () {
            function isIE() {
                if (!!window.ActiveXObject || "ActiveXObject" in window) {
                    return true;
                } else {
                    return false;
                }
            }
            if (isIE()) {
                $('#loginPass').css({ 'height': '38px', 'fontSize': '0', 'padding': '0', 'width': '75%' })
            }
            if (window.navigator.userAgent.indexOf('MSIE 8.0') != -1) {
                $('#loginPass').css('imeMode', 'disabled')
            }
            var flag = true
            $('#loginPass').on('compositionstart', function (e) {
                flag = false
                // alert('检测到您正在输入中文,已对您的操作进行禁止,请重新输入密码') 
            })
            $('#loginPass').on('compositionend', function (e) {
                if (!flag) {
                    e.target.value = ''
                    $('#loginPass').val('')
                    $('.password_text').css('paddingRight', '0px')
                }
                flag = true;
            })
            $('#loginPass').on('input propertychange', function () {
                setTimeout(function () {
                    if (flag) {
                        var password_text = ''
                        for (var i = 0; i < $('#loginPass').val().length; i++) {
                            password_text += '<i class="pass_i" style="display:inline-block;width:8px;height:13px;background-image:url(./image/index/pass.png);background-repeat:no-repeat;background-position:center 0;"></i>'
                        }
                        $('.password_text').html(password_text)
                    }
                }, 0)
                if ($('#loginPass').val() != '') {
                    $('.password_text').css('paddingRight', '15px')
                } else {
                    $('.password_text').css('paddingRight', '0px')
                }
            })
        })

        function set_text_value_position(obj, spos) {
            var tobj = document.getElementById(obj);
            if (spos < 0)
                spos = tobj.value.length;
            if (tobj.setSelectionRange) { //兼容火狐,谷歌
                setTimeout(function () {
                    tobj.setSelectionRange(spos, spos);
                    tobj.focus();
                }, 0);
            } else if (tobj.createTextRange) { //兼容IE
                var rng = tobj.createTextRange();
                rng.move('character', spos);
                rng.select();
            }
        }
        function setInputCursorEnd() {
            if ($('#loginPass').val() != '') {
                set_text_value_position('loginPass', -1)
            }
        }

        function login() {
            console.log($('#loginPass').val())
        }
    </script>


    <div class="posiRelative">
        <input type="text" style="color:#fff;" id="loginPass" placeholder="账号密码" onfocus="setInputCursorEnd();" />
        <img src="image/newIndex/passW.png" style="position: absolute;right: 17%;top: 32px;" />
        <span onclick="setInputCursorEnd()" class="password_text"></span>
    </div>

    <button onclick="login()">登录</button>

</body>


</html>

小圆点是让UI做的，好像有专门的字体图标，可以自己找找看，另外附上密码小圆点的图片