本文介绍如何使用 HTML 复选框实时启用或禁用输入框的 autocomplete 属性，通过原生 JavaScript 监听复选框状态变化并动态更新输入框行为，无需依赖框架，简洁可靠。
本文介绍如何使用 html 复选框实时启用或禁用输入框的 `autocomplete` 属性，通过原生 javascript 监听复选框状态变化并动态更新输入框行为，无需依赖框架，简洁可靠。
在现代 Web 应用中，自动填充（autocomplete）功能可提升用户体验，但有时需允许用户自主控制该行为——例如出于隐私考虑或表单调试需求。一个常见且实用的方案是：为输入框添加一个关联的复选框，用户勾选时启用自动填充，取消勾选时禁用。
实现原理非常直接：利用 <input type="checkbox"> 的 change 事件监听其选中状态（event.target.checked），然后动态设置目标 <input> 元素的 autocomplete 属性值为 "on" 或 "off"。
以下是完整、可直接运行的示例代码：
<input id="username" type="text" autocomplete="off" placeholder="请输入用户名" />
<label>
<input type="checkbox" id="autocomplete-toggle" />
启用浏览器自动填充
</label>
<script>
document.querySelector('#autocomplete-toggle').addEventListener('change', (event) => {
const input = document.querySelector('#username');
input.setAttribute('autocomplete', event.target.checked ? 'on' : 'off');
// 可选：触发一次重绘或日志用于调试
console.log('autocomplete 状态已更新为:', input.getAttribute('autocomplete'));
});
</script>⚠️ 重要注意事项：
- autocomplete="off" 并非在所有浏览器中都强制生效（尤其 Chrome 对密码类字段有特殊策略），但配合复选框控制仍能显著提升用户可控性；
- 建议始终为输入框和复选框设置明确的 id，避免 DOM 查询失败；
- 若页面存在多个需控制的输入框，可将逻辑封装为函数，传入对应 ID 或元素引用；
- 不推荐使用 input.autocomplete = ...（属性赋值）代替 setAttribute()，因部分浏览器对 autocomplete 属性的反射行为不一致；setAttribute() 更具兼容性和语义准确性。
总结而言，该方案轻量、标准、无第三方依赖，完美契合渐进增强的设计理念。只需几行代码，即可赋予用户对自动填充功能的即时开关权，兼顾实用性与隐私友好性。
