禁止(防止)浏览器自动填充密码

时间: 2019-04-09阅读: 403标签: 浏览器
由于设置autocomplete属性和添加隐藏文本框,以及在初始化时阻止写入等方法都无法完全满足需求,所以只能通过js逻辑来控制。 



效果图

主要代码  

/**
*
* 禁止浏览器自动填充密码
*
* @method disabledRememberPassword
* @param {any} el 目标(可多个)
*
*/
function disabledRememberPassword(el) {
    var _el = typeof el === 'object' ? el : $(el);
    if (!_el || _el.length == 0)
        return;
    _el.each(function (index, item) {
        $(item).attr('ilength', 0).attr('autocomplete', 'off').attr('type', 'text').attr('readonly', 'readonly').val('').on('focus', function () {
            this.type != 'password' ? this.type = 'password' : 1;
        }).on('mouseout', function () {
            this.setAttribute('readonly', 'readonly');
        }).on('mouseover', function () {
            this.removeAttribute('readonly');
        }).on('input', function () {
            this.setAttribute('ilength', this.value.length > item.attributes['ilength'].value ? ++item.attributes['ilength'].value : --item.attributes['ilength'].value);
        });
        var clear = () => {
            !item.value ? setTimeout(check, 500) : (item.value = '', setTimeout(clear, 100));
        };
        var check = () => {
            item.value.length != item.attributes['ilength'].value ? (item.setAttribute('ilength', 0), item.value.length == 0 ? setTimeout(check, 500) : (layer.tips('检测到密码输入异常,已自动拦截', item, {
                tips: [2, '#000000'],
                time: 2000
            }), clear())) : setTimeout(check, 500);
        };
        check();
    });
}

说明:其中提示相关的代码使用的是layui的layer模块,可以换成自己想用的东西,或者不进行任何提示。


使用方式

单个

<body>
<input id="password"/>
</body>
<script>
  $(function(){
    disabledRememberPassword('#password');
    //或者
    disabledRememberPassword($('#password'));
  })
</script>

多个

<body>
<input id="password_0">
<input id="password_1">
......
</body>
<script>
    $(function(){
        disabledRememberPassword('#password_0,#password_1')
        //或者
        disabledRememberPassword($('#password_0,#password_1'))
    })
</script>

也可以直接写在body的onload中

<body onload="disabledRememberPassword('#password')">
    <input id="password" />
</body>


总结

其实比较完善的解决方式是:在登录页以及其他会使浏览器提示是否记住密码的页面,放置说明和提示,告知用户这样操做会存在风险,在需要输入密码的地方使用这个js方法进行防范

链接: http://www.fly63.com/article/detial/2772

不同浏览器的内核

网页上所用到的语言有:html, css, JavaScript等,其中,前两者通常决定了该页面长什么样,它们是可以说都是约定的规范。不同的浏览器在获取到某页面的代码文件后,负责根据这套规范将代码渲染出来呈现给用户

Js实现阻止浏览器返回的功能

无论pc端还是移动端,浏览器都会带有后退按钮或后退键.主要方便我们能返回以前访问过的页面,但有时候我们不得不关闭这个功能.尤其是对于一些推广落地页,用户进入后不希望它返回

完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题

h5活动页面底部有个悬浮图片按钮,使用fixed悬浮定位在底部,但是在安卓端的百度浏览器下打开,却发现该图片一闪而过,在百度浏览器中消失不见。

浏览器的三种Js弹窗方式

在做网页时,常常使用弹窗,以上就是浏览器的三种弹窗方式, alert 在测试时常用; confirm 可以套用if...else 来用 ,比如 :confirm点击了确定做什么事情,点击了取消又做什么事情;prompt 弹窗输入 ; 可以给网页设置密码。

火狐浏览器 访问所有HTTPS网站显示连接不安全解决办法

当 Firefox 连接到一个安全的网站时(网址最开始为“https://”),它必须确认该网站出具的证书有效且使用足够高的加密强度。如果证书无法通过验证,或加密强度过低,Firefox 会中止连接到这个网站,并显示“连接不安全”的错误信息页面。

GeckoView:Mozilla面向移动浏览器打造的渲染引擎

Mozilla 现已推出面向 Android 的全新移动浏览器 Firefox Preview。与大多数浏览器所采用的 Bink 渲染引擎不同,Firefox Preview 的渲染引擎 GeckoView 由 Mozilla 自行开发

常用浏览器内核及分类

浏览器是网页运行的平台,常用的浏览器有 IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。 浏览器内核分成两部分:渲染引擎和 JS 引擎

理解Js中的Repaint和Reflow

最近,在研究React的虚拟DOM如此之快的原因时,我意识到我们对javascript性能的了解甚少。所以我写这篇文章是为了帮助提高对Repaint和Reflow以及JavaScript性能的认识。

用Vue.js在浏览器中裁剪图像

你是否写了一个需要接受用户上传图片的 Web 应用,后来才意识到用户总是提供各种形状和大小的图像来破坏你的网站主题?在网络上处理图像很容易成为一种痛苦 —— 当然,除非你使用了正确的工具。

防止用户在浏览器下调试查看js代码

浏览器可以通过F12或者鼠标右键的形式打开html页面,然后就可以看到页面的的信息,如dom结构,加载文件、请求信息等。那有没有办法禁止掉这一行为呢?

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全