Vue Google Chrome 密码自动填充禁用答案

【问题标题】：Vue Google Chrome Password Autofill disableVue Google Chrome 密码自动填充禁用
【发布时间】：2020-04-17 07:27:07
【问题描述】：

我尝试在我的登录屏幕上禁用对我的密码输入字段的提醒。这是我的输入字段`

<r-input
        type="text"
        id="login_username"
        width="95%"
        v-model="formJson.username"
        labelColor="white"
        @keyup.enter="handleLogin"
      ></r-input>

我试过 autocomplete=off 但没用，有什么建议吗？`

【问题讨论】：

这能回答你的问题吗？ Disabling Chrome Autofill
查看这个话题stackoverflow.com/questions/15738259/disabling-chrome-autofill
实际上现在我可以使用 autocomplete="new-password" 禁用自动填充我的用户名输入区域但是当我的输入区域 type="password" 它也不起作用，我需要禁用自动填充密码输入区域为好
我认为您需要阅读整个页面，因为有很多关于如何禁用 chrome 中的自动填充的讨论，以及一个指向 chrome 问题的链接，该链接详细说明了人们需要禁用自动填充的原因，以便问题能够得到妥善解决。也就是说，目前没有保证禁用自动填充的方法。

标签： javascript google-chrome vue.js password-protection github-issues

【解决方案1】：

试试这个： vue-disable-autocomplete

如何使用

import DisableAutocomplete from 'vue-disable-autocomplete';

Vue.use(DisableAutocomplete);

HTML 属性

&lt;input type="email" name="email" autocomplete="off"&gt;

【讨论】：

【解决方案2】：

你只需要输入autocomplete参数：nope

<input
  type="text"
  v-model="name"
  autocomplete="nope"/>

【讨论】：

【解决方案3】：

根据 stackoverflow 上的类似问题 Disabling Chrome Autofill

自 2020 年 9 月起：autocomplete="chrome-off" 禁用 Chrome 自动填充功能。

【讨论】：

【解决方案4】：

首先，你必须安装

npm install --save vue-disable-autocomplete

导入这个

从 '@aacassandra/vue-disable-autocomplete' 导入 DisableAutocomplete； Vue.use(DisableAutocomplete);

用于输入...

对于形式...

【讨论】：

这是将输入设置为只读...有什么好处？

【解决方案5】：

我知道这个主题是旧的，但似乎随着 Chrome 的每次更新，问题又回来了。我尝试了几种方式，包括autocomplete="nope"和this.$refs.inputHoweverName.$el.setAttribute('autocomplete', 'nope');

最近在 Chrome 版本 87.0.4280.88 中，我无需安装任何插件、使用本机 javascript 的唯一方法就是创建一个动态 id：

标记示例

<v-text-field :id="dynamicID()" ... </v-text-field>

方法示例

dynamicID() { return 'dynamicID-' + Math.floor(Math.random() * Date.now().toString()); },

我不知道这是否是最优雅和最有效的方式，但对我来说它解决了，而且很多就足够了。

【讨论】：