js防止浏览器记住密码

问题

遇到一个客户要求登录时，不能被浏览器截取记录密码，效果如下

根源

其实这个问题的根源就在于浏览器会捕捉你的password的输入记录，以最后一次为节点进行存储。所以不管我们对password做什么处理，只要是password进行了输入，都会被拦截。

我也试过网络上各种方案，但是可能是浏览器也在更新迭代，以前的老办法都不适用了。

所以，我们能不能通过css方案自定义一个password。不用监听 KeyboardEvent，那玩意太复杂，需要是对键盘事件做全局监听进行计算。

解决方案(以vue为例)

我们通过自定义提供一个密码隐藏和展示的方法，不用password。实测兼容火狐和谷歌。
但是需要使用一个插件，text-security
css

.pwd input{font-family: text-security-disc;/* Use -webkit-text-security if the browser supports it */-webkit-text-security: disc;
}

html

<!--css 因为我是在html里做的demo，所以这么引入。单页面引用可参考github-->
<link href="dist/text-security.css" rel="stylesheet" type="text/css"><!--html-->
<el-input :class="[hidePwd ? 'pwd' : '']"placeholder="密码"v-model.trim="form.password"
><i class="el-icon-lock el-input__icon" slot="prefix"></i><i class="el-icon-view el-input__icon" slot="suffix" @click="hidePwd=!hidePwd" ></i>
</el-input>

案例图片

借鉴内容：
CSS＋JS实现浏览器不保存用户名密码
禁用input自动补全，模拟type=password输入字符显示为星号

js防止浏览器记住密码相关推荐

禁止input密码自动填充及浏览器记住密码完整解决方案
完整方案禁止缓存,禁止自动填充,不会触发浏览提示记住密码,其余与正常一致,该方案跨浏览器兼容且易结合任何框架及库使用. npm i nice-pass-word 具体使用参照文档既可以. 下面的内容 ...
浏览器记住密码后，密码框自动填充功能禁用
大家在做修改密码功能的时候,需要手动输入原始密码来进行校验,然而浏览器记住密码后页面上的password框点击后会自动出现原始密码,这样即使不知道原始密码,也能进行密码的修改,是非常不安全的操作.参考 ...
浏览器记住密码--原理/不记住密码的方法
原文网址:浏览器记住密码--原理/不记住密码的方法_IT利刃出鞘的博客-CSDN博客简介本文介绍浏览器是如何自动跳出保存密码的提示的,并介绍如何让浏览器不自动跳出保存密码的提示的方法. 记住密码的 ...
禁止浏览器记住密码和自动填充密码
禁止浏览器记住密码和自动填充密码 1.在不输入时设置为只读(只能做到禁用自动填充) <FormItem label="密码" prop="password" ...
关于password导致input弹出浏览器记住密码弹框问题
关于password导致input弹出浏览器记住密码弹框问题问题描述问题解决代码实现问题描述当有input有password的输入框在的时候,其他input输入框可能会在获取光标的时候会弹出 ...
浏览器记住密码_浏览器会记住您的密码，但是您不会吗？拿回它！
浏览器记住密码 We've all seen something like this: 我们都看到过这样的事情: But you have no idea what the password is. ...
Google浏览器记住密码之后，自动填充后input的背景色和color默认样式去除
google浏览器记住密码之后,账号密码框自动填充到input当中,输入框的背景色为白色,color为黑色,目标是去除这些自动填充之后的默认样式. 在reset.css当中写入填充后的样式 input ...
html如何清除密码,React 清除浏览器记住密码框组件
最近项目中有一个需求:清除浏览器记住密码.故写了这么个组件. import React from 'react'; import { Input } from 'antd'; class Passwo ...
input禁止浏览器记住密码
再网上找了很多方法,都没用 1,设置autocomplete="off"或者autocomplete="new-password" 部分有用 2,放置<i ...

js防止浏览器记住密码

问题

根源

解决方案(以vue为例)

js防止浏览器记住密码相关推荐

最新文章

热门文章