如何禁用网页表单字段或输入标签的浏览器自动完成功能

技术背景

在网页开发中，浏览器的自动完成功能可以为用户提供便利，自动填充之前输入过的信息。然而，在某些情况下，如涉及敏感信息（如密码、信用卡安全码）的表单，开发者可能希望禁用该功能，以增强安全性或避免不必要的干扰。但不同浏览器对禁用自动完成的支持和行为存在差异，这给开发者带来了挑战。

实现步骤

通用方法

• 设置 autocomplete="off"：这是最基本的方法，通过在表单元素或表单标签上设置该属性来尝试禁用自动完成。

<input type="text" name="foo" autocomplete="off" />
<form action="" autocomplete="off">

• 随机化表单字段名称：通过代码在生成页面时随机化表单字段名称，提交表单时在服务器端处理前去除随机部分。这样可以防止浏览器找到字段上下文，还可能有助于防止 XSRF 攻击。

针对不同浏览器的特殊处理

• Safari：如果表单中有两个密码字段（新密码和确认新密码），Safari 会认为这是一个更改密码表单，从而禁用自动完成。
• Chrome
  • 在表单顶部添加隐藏的文本和密码输入框：

<input type="text" style="display:none">
<input type="password" style="display:none">

- 使用 `autocomplete="new-password"`：对于密码输入框，设置该属性可有效禁用自动填充。

<input name="pass" type="password" autocomplete="new-password" />

- 将 `input` 类型改为 `search`：Google 不会对类型为 `search` 的输入框应用自动填充。

<input type="search" name="field" />

• 其他浏览器：可以尝试使用 JavaScript 代码来设置 autocomplete 属性。

$('input').attr('autocomplete', 'off');

特殊处理：只读并在聚焦时可写

对于不希望记住表单数据的输入框（如用户名、密码），可以设置为只读，并在聚焦时移除只读属性。

<input type="text" name="UserName" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">
<input type="password" name="Password" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">

纯 HTML 解决方案

在 form 上禁用自动完成，然后在需要的 input 上开启。

<form autocomplete="off">
    <input name="username" />
    <input name="password" type="password" />
    <input name="another_field" autocomplete="on" />
</form>

使用随机字符串

将 autocomplete 属性设置为随机字符串，如 autocomplete="rutjfkde" 或 autocomplete="nope"。

核心代码

禁用单个输入框的自动完成

<input type="text" name="example" autocomplete="off" />

禁用整个表单的自动完成

<form action="" autocomplete="off">
    <input type="text" name="field1" />
    <input type="password" name="field2" />
    <input type="submit" />
</form>

针对 Chrome 的密码输入框处理

<input name="pass" type="password" autocomplete="new-password" />

只读并在聚焦时可写的输入框

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

最佳实践

• 安全考虑：对于涉及敏感信息（如密码、信用卡安全码）的表单，务必禁用自动完成功能，以防止信息泄露。
• 用户体验：在禁用自动完成时，要考虑用户体验，避免过度禁用影响用户的便利性。可以在必要时提供清晰的提示，告知用户该功能已被禁用。
• 兼容性测试：不同浏览器对自动完成的处理方式可能不同，因此在开发过程中要进行充分的兼容性测试，确保在各种主流浏览器中都能正常工作。

常见问题

• autocomplete="off" 无效：许多浏览器和密码管理器现在会忽略 autocomplete="off"。这是因为一些网站为了所谓的“安全目的”添加该属性，但实际上降低了安全性，导致用户使用容易记忆（也容易破解）的密码。可以尝试使用上述针对不同浏览器的特殊处理方法。
• 自动填充到错误的字段：浏览器有时会将用户名和/或密码信息插入到不适当的表单字段中，导致表单验证错误。可以使用只读并在聚焦时可写的方法来解决这个问题。
• 缓存问题：浏览器可能会缓存页面，导致更改不生效。可以使用开发者工具（如按 F12）检查更改是否生效。