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"` 属性。

在下列代码中，为其添加一个视频作为总体的背景，该如何实现<div class="login-container"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left" > <div class="title-container"> <!-- <h3 class="title">Login Form</h3> --> </div> <el-form-item prop="username"> <span class="svg-container"> <svg-icon icon-class="user" /> </span> <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text" tabindex="1" auto-complete="on" /> </el-form-item> <el-form-item prop="password"> <span class="svg-container"> <svg-icon icon-class="password" /> </span> <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="Password" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" /> <span class="show-pwd" @click="showPwd"> <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> </span> </el-form-item> <el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px" @click.native.prevent="handleLogin" >Login</el-button > <div class="tips"> <span style="margin-right: 20px">username: admin</span> <span> password: any</span> </div> </el-form> </div>

要在上述代码中添加一个视频作为总体的背景，你可以使用 HTML5 的 `<video>` 元素来实现。具体步骤如下：

1. 在页面中添加一个 `<video>` 元素，并设置其属性：

<video id="bg-video" autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
</video>

上述代码中，我们创建了一个 `id` 为 `bg-video` 的 `<video>` 元素，并设置了 `autoplay`、`loop` 和 `muted` 属性分别表示自动播放、循环播放和静音。同时，我们还为该元素添加了一个 `source` 子元素，指定视频文件的路径和类型。

2. 在 CSS 中设置 `<video>` 元素的样式：

#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

上述代码中，我们设置了 `<video>` 元素的 `position` 属性为 `fixed`，使其固定在页面上。同时，我们设置了 `top`、`left`、`width` 和 `height` 属性为 `0`、`0`、`100%` 和 `100%`，使其覆盖整个页面。我们还设置了 `object-fit` 属性为 `cover`，以确保视频始终填充整个元素。最后，我们设置了 `z-index` 属性为 `-1`，以确保该元素位于所有其他元素的下方。

3. 在 JavaScript 中控制视频的播放：

const video = document.getElementById('bg-video');

video.addEventListener('loadedmetadata', function() {
  video.play();
});

上述代码中，我们获取了 `<video>` 元素，并为其添加了一个 `loadedmetadata` 事件监听器，当视频元数据加载完成后，自动播放视频。

需要注意的是，由于视频文件可能较大，导致加载时间较长，因此最好将视频文件进行压缩或裁剪，以确保页面加载速度不受影响。