如何禁止浏览器缓存指定输入控件的输入内容？

当然可以！这种场景我也踩过坑——自动补全的旧引用确实容易让用户误填，尤其是要求唯一值的字段。下面分享几个实用的解决方法，按可靠性排序：

方法1：直接使用HTML autocomplete 属性（最推荐） #

给目标输入字段添加 autocomplete="off" 属性，明确告诉浏览器不要缓存这个字段的输入内容：

<input type="text" name="unique-reference" id="unique-reference" autocomplete="off" />

如果某些现代浏览器（比如Chrome）偶尔忽略 off 值，可以试试自定义一个非标准的 autocomplete 值，比如：

<input type="text" name="unique-reference" autocomplete="unique-resource-id" />

因为浏览器只会对它识别的类型（如username、email）触发自动补全，自定义值会让它直接跳过这个字段。

方法2：readonly 属性 + 聚焦事件（兜底方案） #

要是方法1在个别浏览器里不好使，可以用这个小技巧：初始把字段设为 readonly，当用户点击/聚焦字段时再移除只读属性。浏览器不会缓存只读字段的内容，这样就能彻底避免自动补全：

<input 
  type="text" 
  name="unique-reference" 
  readonly 
  onfocus="this.removeAttribute('readonly');"
  onblur="if(!this.value) this.setAttribute('readonly', true);"
/>

加个onblur是为了如果用户没输入内容就离开，字段回到只读状态，保持交互一致性。

方法3：表单级别的禁用（不推荐，除非全表单需要） #

如果整个表单都不需要自动补全，可以给<form>标签加autocomplete="off"：

<form autocomplete="off">
  <!-- 表单内容 -->
  <input type="text" name="unique-reference" />
</form>

不过这种方法会影响所有字段，所以只适合全表单都不需要缓存的场景。

注意事项 #

• 不同浏览器对autocomplete属性的处理略有差异，建议优先试用方法1，不行再用方法2兜底；
• 不要依赖浏览器的隐私设置来解决问题，必须通过代码主动控制，保证所有用户都能获得一致的体验。

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