浏览器表单自动填充问题【阻止浏览器提示保存密码和自动填充密码】
配置上
方法一:手动 关闭浏览器提示保存密码和自动填写密码配置
代码上:
简单来说,有两种情况——
【案例1】:你的input
类型不是password
。在这种情况下,解决方案很简单,分为三个步骤。
将
name
属性添加到input
name
不应以电子邮箱或用户名之类的值开头,否则Chrome任然会显示下拉列表。例如,name="emailToDelete"
显示下拉菜单,但name="to-delete-email"
不显示。同样适用于autocomplete
属性。添加
autocomplete
属性,并添加对你有意义的值,例如,new-field-name
它看起来像这样,在你的余生中你不会再看到这个输入框的自动填充。
【案例2】:input
的类型是password
好吧,这种情况下,无论你进行任何实验,Chrome都会想你显示
管理密码/使用现有密码
的下拉菜单。Firefox也会有类似的现象,所以其他主要浏览器也是如此。1在这种情况下,如果你真的想阻止用户查看
管理密码/使用现有密码
的下拉菜单,你将不得不使用JavaScript来切换输入类型。
针对于type=password
的解决方案,建议使用type=text
来代替
@font-face{ font-family: text-security-disc; src: url("https://www.yanjun202.com/text-security-disc.woff");}input.password { font-family: text-security-disc; -webkit-text-security: disc;}
补充1.如果需要动态显示隐藏秘密的小眼睛,在vue组件可以插槽显示,绑定点击事件,动态切换样式.
补充2.text-scurity-disc字体地址打不开的花,可以 通过 · npm install text-security · 安装后提取出 需要的.woff文件 到项目中间,然后替换引用地址即可
或者github https://github.com/noppa/text-security/tree/master/dist
demo 演示地址:https://stackblitz.com/edit/js-ap3nz1?file=index.html