曾经有一个问题，困惑了很久。问题如下。当我点击角色下拉框时，弹出用户名的自动填充，真是恶心，我只点了一个select，没有点用户名区，然后网上找了很多方法，什么把autocomplete改成off，什么display:none，然后显示等等，很多帖子都是复制过来的别人贴的。可能还没有亲自测试过。后来发现当我给一个input="text"设置placeholder为mailbox,email,e-mail这三个关键字，点击输入的时候，也会自动填写，如果不包括这三个关键字，不会有自动填充。其实这个功能是浏览器的，通过判断占位符中的关键字找到的。但是我要找的不是我们网页中的用户名和密码。是浏览器的地址和其他信息中的邮箱。如果没有添加地址和邮箱，那么即使占位符设置为“email”，也不会被填充，除非添加新的地址。那么就和我们平时看到的用户名和密码一样了。填充和邮箱填充有什么区别？用户名和密码的填写在“密码区”，当前的“ip和端口”下有之前保存的用户名和密码，然后会出现自动填写。浏览器很容易找到密码区，只需要知道输入的是哪种类型的密码，那么它怎么知道用户名是谁呢？原来，默认情况下，浏览器会找到距离type="password"最近的输入域为"用户名"并填写，只要获得焦点，就会出现"用户名填写区"。那么问题来了，我不想让点击输入被填充（因为真的很恶心），怎么办？个人认为有以下几种方法：1.调整顺序，把真实用户名放在密码上面（可以和产品聊天，顺序无所谓）2.禁用浏览的自动填充功能但是这样可以只取决于用户。如果用户不禁用它，您将无能为力。3、将密码拆分成另一个表格，让一个表格保存正常输入，另一个表格保存密码，两个表格中的字段互不干扰，点击输入，不会自动填充4.将类型改为文本，使用passwordEntry.ttf@font-face{font-family:'passwordEntry';src:url(./passwordEntry.ttf);}input{font-family:'passwordEntry'!important;}这样密码栏会显示passwordEntry定义的font-family，passwordEntry不是普通字体，但所有字体都显示为原点。这模拟了密码输入。我不会发布PasswordEntry.ttf文件。可以百度下载。有许多。随便找一个免费的。ttf的兼容性也很好。="off"截取mdn的解释，大意是只要是密码框，浏览器就会一直自动填写。自动完成属性被忽略。2.autocomplete="new-password"拦截mdn详见autocompletemdn
