哥们，我太懂你说的这种憋屈了——Chrome的自动填充简直是硬塞，一堆老方案要么失效要么绕得要死，Firefox现在也跟着学坏。关于怎么在这种情况下验证用户身份，我整理了几个实测还能用的思路：

浏览器虽然强硬，但还是留了一些原生属性可以针对性调整：

• 针对一次性验证码/临时验证字段：用autocomplete="one-time-code"，这个属性是浏览器专门为一次性验证码设计的，不会触发常规的自动填充，反而会提示用户读取短信里的验证码，非常适合身份验证场景。示例代码：

  <input type="text" name="verify_code" autocomplete="one-time-code" placeholder="请输入验证码">
  

• 针对密码类验证字段：结合autocomplete="off"和readonly的小技巧——默认给输入框加readonly，让浏览器认为这是不可编辑的字段不会自动填充，用户点击聚焦时再移除readonly属性。示例：

  <input type="password" name="verify_pass" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" placeholder="请输入密码验证">
  

  亲测这个方法在Chrome 110+版本还能生效，比单纯加autocomplete="off"靠谱得多。

浏览器的自动填充逻辑主要是根据字段名、类型来匹配的，我们可以放一个“诱饵”输入框让浏览器去填，真实的验证字段避开这个匹配逻辑：

• 把诱饵输入框绝对定位到可视区域外，并且设置和常见自动填充字段一样的name，比如：

  <!-- 诱饵：让浏览器自动填充到这里，用户看不到 -->
  <input type="text" name="username" style="position: absolute; left: -9999px; top: -9999px;" aria-hidden="true">
  <input type="password" name="password" style="position: absolute; left: -9999px; top: -9999px;" aria-hidden="true">
  
  <!-- 真实的验证输入框：用独特的name，避免被匹配 -->
  <input type="text" name="auth_username" placeholder="请输入用户名完成验证">
  <input type="password" name="auth_password" placeholder="请输入密码完成验证">
  

  注意要给诱饵加aria-hidden="true"，避免屏幕阅读器识别到，影响无障碍体验。

前端的手段始终有被浏览器绕过的可能，最稳妥的还是后端层面的二次验证：

• 发送一次性验证凭证：用户提交前端验证信息后，后端直接给用户绑定的邮箱/手机号发送验证码，要求用户输入后才能完成身份验证——不管前端有没有被自动填充，这一步都能确保是用户本人操作。
• WebAuthn生物识别验证：如果你的产品支持，可以集成WebAuthn，让用户用指纹、面部识别等生物特征完成验证，完全避开密码自动填充的问题，安全性还更高。

另外提个小细节：尽量不要用email、password这种太通用的字段名作为验证字段的name，改用更独特的命名（比如verify_email_xxx），能降低被浏览器自动填充命中的概率。

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