HTML登录页自动填充phpMyAdmin凭据问题求助

这事儿我之前排查过好几次，浏览器的自动填充有时候真的会无视autocomplete="off"，尤其是当它识别到你的表单结构和已保存的登录项匹配时——比如你的邮箱+密码组合，刚好和phpMyAdmin的登录表单对上了，再加上如果是本地开发（比如都是localhost域名），浏览器就更容易混淆不同路径下的表单，直接把phpMyAdmin的凭据填进来了。

为什么autocomplete="off"没用？ #

现在Chrome、Firefox这些主流浏览器为了用户体验，会在登录类表单场景下忽略autocomplete="off"设置，它们默认认为用户希望自动填充已保存的密码，所以这个属性在这类场景下的优先级被降低了。

可行的解决方案 #

• 给整个表单也加上autocomplete="off"
  你已经给输入框加了，但表单层面的设置有时候能增强效果：

  <form action="check.php" method="post" autocomplete="off">
    <input type="email" name="email" autocomplete="off" required/>
    <input type="password" name="pass" autocomplete="off" required/>
    <input class="input_line" type="submit"/>
  </form>
  

• 用更精准的autocomplete属性值
  针对密码输入框，可以使用autocomplete="new-password"，这个属性是告诉浏览器“这是一个需要设置新密码的输入框”，不会自动填充已保存的旧密码：

  <input type="password" name="pass" autocomplete="new-password" required/>
  

• 添加隐藏的“诱饵”输入框
  这是个实用的小技巧，在真实输入框前添加两个隐藏的假输入框，让浏览器先填充这些“诱饵”，从而跳过真实输入框：

  <form action="check.php" method="post" autocomplete="off">
    <!-- 隐藏的诱饵输入框 -->
    <input type="text" style="position: absolute; left: -9999px;" autocomplete="username">
    <input type="password" style="position: absolute; left: -9999px;" autocomplete="current-password">
    <!-- 真实输入框 -->
    <input type="email" name="email" autocomplete="off" required/>
    <input type="password" name="pass" autocomplete="off" required/>
    <input class="input_line" type="submit"/>
  </form>
  

  这里用position: absolute; left: -9999px;而不是display: none;，是因为有些浏览器会忽略display为none的输入框，用绝对定位隐藏更稳妥。

• 检查浏览器的已保存凭据
  如果是本地开发环境（比如localhost），浏览器可能把你的登录页面和phpMyAdmin的页面归为同一域名下的表单，你可以去浏览器的设置里找到已保存的密码列表，删除对应的phpMyAdmin凭据，或者给你的项目设置一个自定义的本地域名（比如通过hosts文件配置），让浏览器区分开不同的站点。

你可以按顺序试试这些方法，通常前两个就能解决问题，如果还是不行，再尝试诱饵输入框的方案。

内容的提问来源于stack exchange，提问作者user5303001