由于设置 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 ? (layer.tips('检测到密码输入异常, 已自动拦截', item, {
- tips: [2, '#000000'],
- time: 2000
- }), item.setAttribute('ilength', 0), 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.bubuko.com/infodetail-3016906.html