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自动填充内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源链接：https://www.jb51.net/javascript/325983maq.htm

展开阅读全文

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END