如何关闭 form 表单自动填充

默认情况下，浏览器会记录用户网页上提交的输入框的信息。这使得浏览器能够提供自动补全（在用户开始输入的时候给用户提供可能的内容）和自动填充（在加载的时候预先填充某些字段）功能。

这些功能通常是默认启用的。

要禁用的表单自动填充，你可以将 autocomplete 的属性设置为 off：

<input type="text" autocomplete="off">

可以为整个表单设置或为表单中某个输入元素单独设置：

<form method="post" action="/form" autocomplete="off">
  <!-- ... -->
</form>

<form method="post" action="/form">
  <!-- ... -->
  <div>
    <label for="cc">信用卡：</label>
    <input type="text" id="cc" name="cc" autocomplete="off">
  </div>
</form>

设置 autocomplete="off" 会有两种效果：

如果即使在 autocomplete 已经设置为 off 时，浏览器仍继续提供输入建议，那么你需要在输入框设置 autocomplete="new-password"。

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

这只适用于谷歌浏览器。一个更加兼容的做法：

使用 readonly 属性和 focus 事件搭配，当浏览器打开页面只读，鼠标聚焦到文本框再放开：

<el-form-item label="用户名：">
  <el-input type="text" :readonly="readonlyInput"
    @focus="cancelReadOnly()" v-model="params.username"
    placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码：">
  <el-input :readonly="readonlyInput" @focus="cancelReadOnly()"
    type="password" placeholder="请输入密码"></el-input>
</el-form-item>

data() {
  return {
    readonlyInput: true,
  };
},
methods: {
  cancelReadOnly() {
    this.readonlyInput = false;
  },
},

补充

补充：现代浏览器对密码字段有"主动记忆"机制，单纯 autocomplete="off" 在登录场景常常失效，需要配合其他手段。

兜底方案

方案	适用场景
`autocomplete="off"`	通用字段，多数浏览器生效
`autocomplete="new-password"`	登录密码框，规避浏览器强记忆
配合 readonly + focus 事件	移动端 H5、对自动填充敏感的场景
隐藏字段 / 验证码	区分机器人自动填充