在主要浏览器中禁用 Web 表单字段的自动完成功能

禁用 HTML 表单中的自动完成

HTML解决方案

<!-- HTML form with autocomplete disabled -->
<form action="/submit" method="post" autocomplete="off">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" autocomplete="off">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" autocomplete="new-password">

  <button type="submit">Submit</button>
</form>

在 JavaScript 中处理自动完成

JavaScript解决方案

<!-- HTML form -->
<form id="myForm" action="/submit" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <label for="address">Address:</label>
  <input type="text" id="address" name="address">

  <button type="submit">Submit</button>
</form>

<!-- JavaScript to disable autocomplete -->
<script>
  document.getElementById('email').setAttribute('autocomplete', 'off');
  document.getElementById('address').setAttribute('autocomplete', 'off');
</script>

使用后端控制自动完成

Node.js 与 Express

// Express server setup
const express = require('express');
const app = express();
const port = 3000;

// Middleware to set headers
app.use((req, res, next) => {
  res.set('Cache-Control', 'no-store');
  next();
});

// Serve HTML form
app.get('/', (req, res) => {
  res.send(`
    <form action="/submit" method="post" autocomplete="off">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">

      <label for="phone">Phone:</label>
      <input type="tel" id="phone" name="phone">

      <button type="submit">Submit</button>
    </form>
  `);
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

有关禁用自动完成功能的常见问题

1. 如何禁用单个输入字段的自动完成功能？
2. 您可以通过添加以下内容来禁用单个输入字段的自动完成功能 autocomplete="off" 归因于 <input> 标签。
3. 有没有办法使用 JavaScript 禁用自动完成功能？
4. 是的，您可以使用 JavaScript 通过设置属性来禁用自动完成功能 document.getElementById('inputID').setAttribute('autocomplete', 'off');。
5. 可以禁用密码字段的自动完成功能吗？
6. 对于密码字段，您应该使用 autocomplete="new-password" 以防止浏览器建议旧密码。
7. 如何禁用整个表单的自动完成功能？
8. 要禁用整个表单的自动完成功能，请添加 autocomplete="off" 归因于 <form> 标签。
9. 哪些服务器端标头可用于控制自动完成？
10. 使用像这样的标题 Cache-Control: no-store 和 Pragma: no-cache 可以帮助从服务器端控制自动完成行为。
11. CSS 对自动完成有影响吗？
12. 虽然 CSS 不能直接禁用自动完成，但它可以用于以阻止自动完成的方式设置输入字段的样式，例如隐藏字段直到需要时为止。
13. 内容安全策略 (CSP) 会影响自动完成吗？
14. 设置 CSP 标头可以通过控制资源加载和增强整体安全性来间接影响自动完成。
15. 敏感信息领域的最佳实践是什么？
16. 对于敏感信息字段，请始终使用 autocomplete="off" 或者 autocomplete="new-password" 并考虑与服务器端标头结合以确保安全性。
17. 是否有一种通用方法可以在所有浏览器中禁用自动完成功能？
18. 使用 HTML 属性、JavaScript 和服务器端标头的组合提供了在所有主要浏览器中禁用自动完成功能的最全面的解决方案。