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

君哥阅读：1915 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来切换输入类型。

针对于type=password的解决方案,建议使用type=text来代替

@font-face{  font-family: text-security-disc;  src: url("https://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://yanjun202.com/post/82.html

分享到：

标签:什么是节流与防抖数组 trim JavaScript 字符串

可以去百度分享获取分享代码输入这里。