2022年如何禁用输入框的自动填充功能？

方案1：使用autocomplete="new-password" #

现代主流浏览器对该属性支持度较高，原本针对密码输入框设计，但同样可用于普通文本输入框。浏览器会将标记了该属性的字段识别为「无需自动填充的新字段」，从而跳过自动填充逻辑。
示例代码：

<input type="text" autocomplete="new-password">
<input type="password" autocomplete="new-password">

方案2：动态生成输入框 #

浏览器的自动填充逻辑通常在页面初始渲染阶段触发，通过JavaScript在页面加载完成后动态创建输入框并替换静态元素，可避开这一扫描机制。
示例代码：

window.addEventListener('load', function() {
  const inputContainer = document.getElementById('input-container');
  const dynamicInput = document.createElement('input');
  dynamicInput.type = 'text';
  dynamicInput.name = 'user-account';
  inputContainer.innerHTML = '';
  inputContainer.appendChild(dynamicInput);
});

方案3：临时隐藏+延迟显示输入框 #

先将目标输入框设为隐藏状态，待页面加载完成后延迟一段时间再显示，以此绕过浏览器初始的自动填充检测。
示例代码：

<style>
  .temp-hidden { display: none; }
</style>
<input type="text" name="user-email" class="temp-hidden" id="email-input">
<script>
  setTimeout(() => {
    document.getElementById('email-input').classList.remove('temp-hidden');
  }, 500);
</script>

方案4：只读属性+交互移除 #

给输入框添加readonly属性，浏览器不会对只读字段执行自动填充；当用户点击输入框时，再移除该属性恢复可输入状态。
示例代码：

<input type="text" name="phone" readonly onclick="this.removeAttribute('readonly')">

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