el-input取消自动填充

### 如何在 Element UI 中禁用 el-input 组件的自动填充

为了防止 `el-input` 组件被浏览器自动填充，可以采取多种方法来实现这一目标。

#### 方法一：通过设置 autocomplete 属性

对于表单中的输入字段，可以通过设置 `autocomplete="off"` 来阻止浏览器尝试预填数据。此方式适用于标准 HTML 输入框以及基于这些标签构建的组件，如 Element Plus 的 `el-input`[^1]。

<el-form>
  <el-form-item label="用户名">
    <el-input v-model="username" autocomplete="off"></el-input>
  </el-form-item>
</el-form>

<script setup lang="ts">
import { ref } from 'vue';

const username = ref('');
</script>

#### 方法二：动态改变 input 类型

当页面加载完成后立即将密码域转换成其他类型的输入框（比如 text），然后再迅速转回 password，这样可以让某些版本的 Chrome 浏览器放弃自动填写行为[^2]。

// 假设这是 Vue 实例内的 methods 或者 Composition API 下的方法
nextTick(() => {
  const pwdInput = document.querySelector('.pwd-field');
  if (pwdInput) {
    pwdInput.setAttribute('type', 'text'); // 切换到文本模式
    requestAnimationFrame(() => {
      pwdInput.setAttribute('type', 'password'); // 还原为密码模式
    });
  }
});

#### 方法三：使用虚拟字段隐藏真实输入

创建两个不可见的 `<input>` 字段放置于实际可见之前作为干扰项，使得浏览器误认为已经找到了匹配的登录凭证而不再继续寻找并填充后面的真正条目[^3]。

<!-- 隐藏的假输入 -->
<input style="display:none;" type="text" name="fakeusernameremembered"/>
<input style="display:none;" type="password" name="fakepasswordremembered"/>

<!-- 真实的用户界面 -->
<el-form :model="formLabelAlign">
  <!-- ...其余代码... -->
</el-form>

以上三种方案可以根据具体应用场景灵活选用或组合应用以达到最佳效果。