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

阻止浏览器记住密码

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

 

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

最终效果： 

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

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

 

既然这些都不能被满足，那么自己写一个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 += ''
                        }
                        $('.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的焦点是同一个方式

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

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

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

 

最终解决方法实例代码：

样式可以自己调

    
    
    

    



    
    


    

        
        
        
    

    登录

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

至于img标签就是那把锁