脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → el-input自动填充

el-input 密码自动填充的方法汇总

 更新时间：2024年08月15日 11:06:08   作者：Wu Youlu  
在开发 Web 应用时,通常需要避免浏览器自动填充密码,以下是一些可行的解决方案,特别针对使用 Element UI 框架的 el-input 组件,下面给大家分享el-input 密码自动填充的方法,感兴趣的朋友跟随小编一起看看吧

避免 el-input 密码自动填充的实用方法

在开发 Web 应用时，通常需要避免浏览器自动填充密码。以下是一些可行的解决方案，特别针对使用 Element UI 框架的 el-input 组件。

方法 1：设置随机的 name 和 autocomplete 属性

浏览器根据 name 属性来识别输入字段的类型，因此可以使用随机的 name 属性，并将 autocomplete 设置为 new-password。

实现

<el-input
  type="password"
  :name="randomName"
  autocomplete="new-password"
  v-model="password">
</el-input>
export default {
  data() {
    return {
      password: '',
      randomName: `password_${Math.random().toString(36).substr(2, 9)}`
    };
  }
}

方法 2：使用隐藏的密码输入字段

通过在页面中添加一个隐藏的输入字段，可以避免自动填充密码字段。

实现

<el-input
  type="text"
  style="display: none;"
  autocomplete="username">
</el-input>
<el-input
  type="password"
  autocomplete="new-password"
  v-model="password">
</el-input>

方法 3：使用 meta 标签阻止密码管理器

在 HTML 中添加以下 meta 标签，可能会阻止某些密码管理器的自动填充功能。

实现

<meta name="disable-autofill" content="on">

方法 4：事件拦截

通过监听输入事件，可以在获取焦点时手动清除输入字段的内容。

实现

methods: {
  clearInput(event) {
    event.target.value = '';
  }
}
<el-input
  type="password"
  autocomplete="new-password"
  @focus="clearInput"
  v-model="password">
</el-input>

方法 5：动态改变 readonly 属性

通过设置 readonly 属性为true，可以避免一开始自动填充，在 mousedown 或 focus 事件触发时设置为 false ,允许输入

实现

          <el-input
            placeholder="密码"
            type="password"
            v-model="loginForm.userPwd"
            show-password
            @focus="passwordMousedownFun"
            @input="passwordInputFun"
            @mousedown.native="passwordMousedownFun"
            :readonly="passwordReadonly"
            id="passwordRef"
          >
      loginForm: {
        userName: "",
        userPwd: "",
        userRember: false,
      },
      passwordReadonly: true,
  watch: {
    loginForm: {
      handler: function (newValue, oldValue) {
        if (newValue.userPwd == "") {
          this.passwordReadonly = true;
          setTimeout(() => {
            this.passwordReadonly = false;
          }, 0);
        }
      },
      deep: true,
    },
  },
    passwordMousedownFun() {
      if (this.loginForm.userPwd === "") {
        this.passwordReadonly = true;
      } else {
        if (this.loginForm.userPwd == this.originPwd) {
          this.loginForm.userPwd = "";
        }
      }
      setTimeout(() => {
        this.passwordReadonly = false;
      }, 0);
    },

到此这篇关于el-input 密码自动填充的实用方法的文章就介绍到这了,更多相关el-input自动填充内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论