el-input type=password 时密码自动填充问题 关闭自动填充

当使用`el-input`组件在HTML5表单中设置类型为`password`时，浏览器会提供一种功能，即输入历史记录的自动填充，这可能会显示用户之前在其他网站上使用的密码。为了关闭这种自动填充，你可以采取以下几种策略：

1. **禁用浏览器自动填充**：在HTML中添加`autocomplete="off"`属性到`<input>`元素上，如：

   <el-input type="password" autocomplete="off">

2. **使用`pattern`属性**：虽然不能直接阻止自动填充，但可以利用`pattern`属性指定输入验证规则，让浏览器认为这不是一个常规密码字段，例如：

   <el-input type="password" pattern="[A-Za-z0-9]*">

3. **JavaScript解决方案**：如果你希望在前端进一步控制，可以监听`focus`和`input`事件，并清空输入框内容：

   document.querySelector('el-input[type="password"]').addEventListener('focus', function() {
     this.value = '';
   });

记住，上述方法不能完全阻止所有浏览器的所有自动填充行为，因为这是浏览器的安全特性。但在大多数情况下，它们能显著减少密码的泄露风险。

相关问题

el-input type="password" autocomplete="off" 不起效果，还是会默认加载浏览器缓存密码填充

如果你使用的是 Chrome 浏览器，可以尝试在 input 标签中添加 `autocomplete="new-password"` 属性，这样浏览器就不会自动填充密码。如果还是不起作用，可以在 input 标签外面套一个 form 标签，并设置 `autocomplete="off"`属性。例如：

<form autocomplete="off">
  <el-input type="password" autocomplete="new-password"></el-input>
</form>

这样就可以禁用浏览器的密码自动填充功能了。但需要注意的是，某些浏览器可能不支持 `autocomplete="new-password"` 属性。

el-input 禁止密码自动填充

`el-input` 是 Element UI 中的一个输入框组件，在 Vue.js 中，如果你想防止 `el-input` 的密码输入字段被浏览器自动填充历史密码，你可以通过设置 HTML5 的 `autocomplete` 属性来控制。在这个组件上添加一个自定义属性，比如 `v-model.trim` 或者直接在模板中写死：

<template>
  <el-input type="password" :autocomplete="''"> <!-- 阻止自动填充 -->
    <template #append>
      <span @click="clearPassword">*{placeholder}</span>
    </template>
  </el-input>
</template>

<script>
export default {
  data() {
    return {
      confirmPassword: '',
      placeholder: '请输入密码',
    };
  },
  methods: {
    clearPassword() {
      // 如果需要的话，可以在此处清除输入框的内容
      this.confirmPassword = '';
    },
  },
};
</script>

这里设置了 `autocomplete` 属性值为空字符串，表示不允许任何自动完成。另外，你还可以提供一个点击事件监听器 `clearPassword` 来处理用户手动清除密码的需求。