如何在Chrome中禁用表单自动填充？多种尝试无效求解决方案

我太懂这种挫败感了！Chrome的自动填充机制简直是顽固派，你试过的那些常规方法在它面前经常失效。别担心，我整理了几个亲测有效的方案，既能清除输入框内容，又能彻底干掉那些烦人的输入建议：

方案一：特殊autocomplete属性+非常规字段名组合 #

Chrome现在对autocomplete="off"有点选择性忽略，尤其是针对用户名、邮箱、密码这类常见字段。试试这两个技巧：

• 给输入框设置autocomplete="new-password"（哪怕不是密码字段，这个值会让Chrome放弃自动填充），或者autocomplete="none"；
• 把字段的name和id改成不常见的名称，比如别用email、username，换成user_custom_email这种自定义名称，让Chrome没法识别这是需要自动填充的字段。

示例代码：

<input type="text" id="user_custom_email" name="user_custom_email" autocomplete="new-password">

方案二：readonly属性+焦点事件联动 #

Chrome不会自动填充标记为readonly的字段，我们可以利用这一点，在用户点击输入时再移除只读属性：

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

这个方法既能阻止自动填充，又不影响用户正常输入，亲测对大部分场景有效。

方案三：延迟清空输入框（针对已填充内容） #

Chrome的自动填充往往是在页面加载完成后才触发的，常规的页面加载时清空可能赶不上它的节奏。试试用setTimeout延迟清空：

// 原生JS写法
window.addEventListener('load', function() {
  setTimeout(() => {
    document.getElementById('my_input').value = '';
  }, 100); // 100ms足够等待Chrome完成自动填充
});

// jQuery写法
$(window).on('load', function() {
  setTimeout(() => {
    $('#my_input').val('');
  }, 100);
});

方案四：动态切换输入框类型（终极兜底方案） #

如果上面的方法都不管用，可以试试动态切换输入框的类型，让Chrome无法识别字段类型从而放弃自动填充：

const input = document.getElementById('my_input');
input.addEventListener('focus', function() {
  // 先切换成text，再切回你需要的类型（比如email）
  this.type = 'text';
  setTimeout(() => {
    this.type = 'email';
  }, 10);
});

这个方法有点“投机取巧”，但对付Chrome的顽固自动填充特别有效。

建议你把方案一和方案二结合起来用，基本能解决90%的场景。如果还有漏网之鱼，再加上方案三或四。

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