如何规避Chrome针对非邮箱/密码字段的自动填充策略？

以下是几个实测有效的方案，针对Chrome忽略常规autocomplete="off"的情况：

• 动态设置autocomplete属性
  Chrome可能在页面初始化阶段优先读取输入框属性，动态设置可以绕过这个逻辑。示例代码：

  document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('account_search');
    // 用Chrome未收录的自定义值，或者直接设为off
    searchInput.setAttribute('autocomplete', 'custom-search-123');
  });
  

• 添加隐藏诱饵输入框
  在目标输入框前放置一个隐藏的同类型输入框，让Chrome把自动填充内容导向诱饵，目标框就不会被干扰。示例：

  <!-- 诱饵输入框：绝对定位隐藏，确保不影响页面布局 -->
  <input 
    type="text" 
    style="position: absolute; left: -9999px; top: -9999px;" 
    autocomplete="username"
  >
  <input type="text" id="account_search" autocomplete="off">
  

  注意：避免只用display: none，部分Chrome版本会忽略隐藏状态的诱饵，绝对定位的方式更可靠。

• 利用readonly属性拦截填充
  Chrome不会自动填充标记为readonly的输入框，可在输入框聚焦时移除该属性，不影响用户输入：

  <input 
    type="text" 
    id="account_search" 
    autocomplete="off" 
    readonly 
    onfocus="this.removeAttribute('readonly')"
  >
  

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