浏览器表单自动填充问题【阻止浏览器提示保存密码和自动填充密码】

君哥 阅读:1317 2023-09-18 09:44:26 评论:3

配置上

    方法一:手动 关闭浏览器提示保存密码和自动填写密码配置


代码上:

简单来说,有两种情况——

【案例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来切换输入类型。

 浏览器表单自动填充问题【阻止浏览器提示保存密码和自动填充密码】  什么是节流与防抖 数组 trim JavaScript 字符串 第1张

针对于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


本文链接:https://www.yanjun202.com/post/82.html 

分享到:
可以去百度分享获取分享代码输入这里。
发表评论
搜索
排行榜
关注我们

扫一扫关注我们,了解最新精彩内容