问题

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

根源

其实这个问题的根源就在于浏览器会捕捉你的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输入字符显示为星号