html - autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete

Question

I have an form with autocomplete disabled but it does not works and makes the autocomplete to be enabled in firefox and higher version of chrome

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
    <li>
        <input type="submit" class="button" value="Login" id="Login" name="Login">
    </li>
    </ul>
</form>

When the type is changed from password to text it works in all browser. Can anyone help to solve this issue?

score 57 · Accepted Answer

您可以在表单加载时将该字段设为只读。当该字段获得焦点时，您可以将该字段更改为可编辑。这是避免自动完成的最简单方法。

<input name="password" id="password" type="password" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" />

score 36 · Accepted Answer

当我遇到同样的问题时，我通过在密码字段上方创建一个临时文本框并将其隐藏来解决

像这样，

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="text" style="display:none;">
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
        ...
    </ul> </form>

它将使username文本字段不在下拉列表中显示任何先前输入的单词。由于没有类似的属性name，因此id对于输入字段<input type="text" style="display:none;">，它也不会发送任何额外的参数。

我不确定这是一个好习惯，但它会解决问题。

score 27 · Accepted Answer

这将防止密码自动填充到输入字段的（type="password"）中。

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

score 22 · Accepted Answer

浏览器通常有关于表单的两个相关但不同的功能：

表单自动完成，<input type="text">类型（和类似的）项目收集类型值并以下拉列表的形式提供回来。
（这是一个运行良好的简单功能。）
密码管理器，当浏览器检测到您已提交登录表单时，它会提示记住用户名/密码组合。返回站点时，大多数浏览器会在下拉框中显示可用的用户名（Firefox、Chrome、Internet Explorer...），但有些浏览器有工具栏按钮（Opera）。此外，Chrome 以硬编码的黄色突出显示字段。
（这取决于启发式方法，并且可能在某些页面上失败。）

有一个带有标记为autocomplete="off". 如果它是登录表单并且用户之前存储了用户名/密码会怎样？实际上从本地数据库中删除密码看起来不合适，所以可能没有浏览器这样做。（事实上，表单自动完成的数据也不会被删除。） Firefox 决定赋予用户权力：你有密码，所以我会让你使用它。Chrome 决定赋予该网站权力。

score 15 · Accepted Answer

只需将autocomplete="new-password"属性添加到密码输入字段即可。

要了解更多信息autocomplete：

score 11 · Accepted Answer

对于文本类型使用autocomplete="off"或autocomplete="false"

<input id="username" type="text" autocomplete="false">

对于密码类型使用autocomplete="new-password"

<input id="password" type="password" autocomplete="new-password">

score 7 · Accepted Answer

对我有用的是仅在输入类型=“密码”中使用自动完成=“新密码”，如下所示：

<input id="username" type="text">
<input id="password" type="password" autocomplete="new-password">

与有多少输入无关。

score 7 · Accepted Answer

我尝试了各种解决方法，但就我而言，这种组合适用于所有浏览器：

<input type="password" id="Password" name="Password" 
       autocomplete="new-password" 
       onblur="this.setAttribute('readonly', 'readonly');" 
       onfocus="this.removeAttribute('readonly');" readonly>

它也是非常干净的解决方案:)

score 5 · Accepted Answer

autocomplete=off在现代浏览器中很大程度上被忽略 - 主要是由于密码管理器等。

您可以尝试添加autocomplete="new-password"它并非所有浏览器都完全支持它，但它适用于某些浏览器

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="text" style="display:none;">
        <input type="password" name="pswd" id="password" maxlength="16" size="20" autocomplete="new-password">
    </li>
        ...
    </ul> </form>

score 4 · Accepted Answer

使用这个简单的代码

<input type="password" class="form-control ltr auto-complete-off" id="password" name="password" autocomplete="new-password">

score 3 · Accepted Answer

你绝对不应该这样做

通过禁止和干扰密码完成，您会降低用户的安全性。密码字段的正确编码应包括：

autocomplete="current-password"

让用户输入密码意味着他们必须使用可以准确输入的弱密码，而不是使用密码管理器和复杂、唯一且长的密码。有关这方面的详细讨论，请参见：https ://www.ncsc.gov.uk/blog-post/let-them-paste-passwords

score 3 · Accepted Answer

添加autocomplete="off"不会削减它 - 它被 Chrome 忽略。

将输入类型属性更改为type="search".
Google 不会对具有某种搜索类型的输入应用自动填充。

score 3 · Accepted Answer

当我遇到同样的问题时，我遇到了两种解决方法。

使用 javascript
使用 html（通过在密码字段上方创建一个临时文本框并将其隐藏）

使用 javascript 的示例

<input onfocus="this.type='password'" onblur="if (this.value.length <= 0) { this.type = 'text' } else { }" id="password"/>

使用 html 的示例（通过在密码字段上方创建一个临时文本框并将其隐藏）

  <input type="text" style="display:none;">
  <input id="password" type="password">

score 3 · Accepted Answer

我知道这是一个老问题，但浏览器一直在随着时间而改变。虽然这里提到的这个问题的一些答案像：在密码字段上方创建一个临时文本框并隐藏它可能在过去有效，但目前防止浏览器弹出密码管理器的最简单方法是至少有三个单独的附加隐藏密码输入，每个都有不同的虚拟值，如下所示：

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
        <input type="password" style="display: none;" value="dummyinput1"/>
        <input type="password" style="display: none;" value="dummyinput2"/>
        <input type="password" style="display: none;" value="dummyinput3"/>
    </li>
    <li>
        <input type="submit" class="button" value="Login" id="Login" name="Login">
    </li>
    </ul>
</form>

score 3 · Accepted Answer

这是一个似乎适用于 Firefox 和 Chrome 的 hack。

在 Firefox 中，在密码字段之前禁用文本字段似乎可以解决问题，即使它是隐藏的（禁用：无）

在 Chrome 中，它必须是可见的。

所以我建议这样的事情：

HTML：

<input class="password-autocomplete-disabler" type="text" disabled>
<input type="password" name="pwd">

CSS：

input[type=text].password-autocomplete-disabler {
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}

score 3 · Accepted Answer

我在这里启发的解决方案如下：

<form>
    <input type="text" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
    <input type="password" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
    Username: <input type="text">
    Password: <input type="password">
    <input type="submit">
</form>

它确实很丑，在 2017 年感觉放错了地方，但它可以工作并保护用户名和密码字段不被自动填充。请注意，在 Firefox（撰写本文时为 51 版）中，无论是在表单还是输入字段中name，使用什么组合id或使用什么组合都无关紧要。autocomplete如果没有前两个虚拟字段，自动填充将在任何时间域匹配时发生，这会毁了你的一天。

score 3 · Accepted Answer

<input type="password" placeholder="Enter Password" class="form-control" autocomplete="new-password">

干得好。

score 2 · Accepted Answer

我最近遇到了这个问题，由于我的字段可以预先填充，所以没有简单的解决方案，我想分享一个我通过在 ready 事件中设置密码类型提出的优雅技巧。

创建时不要将您的输入字段声明为类型密码，而是添加一个准备好的事件侦听器以使用 jQuery 为您添加它：

<input type="text" name="pswd" id="password" maxlength="16" size="20" >

<script>
$(function(){
    document.getElementById('password').setAttribute('type', 'password');
});
</script>

score 2 · Accepted Answer

我的溶胶：

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

function turnOnPasswordStyle(){
    $('#inputpassword').attr('type', "password");
}

score 2 · Accepted Answer

对于密码，它目前不起作用。

因此，默认情况下将密码字段设为文本并使用以下 js 代码。

$('#real-password').on('input', function(){
            if ($(this).val() !== '') {
                $(this).attr('type', 'password');
            } else {
                $(this).attr('type', 'text');
            }
   });

score 2 · Accepted Answer

我发现如果输入没有名称（例如未设置名称属性），浏览器无法自动完成该字段。我知道这不是适合所有人的解决方案，但是如果您通过 AJAX 提交表单，您可以试试这个。

score 2 · Accepted Answer

另一种方法是在页面加载时清除密码字段的值，而不是试图阻止它自动填充。

使用 jQuery 只需添加如下内容：

$(function() { $('input[type="password"]').val(''); });

score 2 · Accepted Answer

为什么不是每个人都使用这个......

        <form>
            <div class="user">
            <i> </i>
            <input type="text" id="u1" name="u1" value="User Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'User Name';}">       
            </div>          
            <div class="user1"> 
            <i> </i>        
            <input type="password" id="p1" name="p1" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" >
            </div>
            <div class="user2">                         
            <input type="submit" value="Login">
            </div>
        </form>

太简单了... :)

score 2 · Accepted Answer

尝试设置 autocomplete="new-password" 如下所示：

<input type="password" name="pswd" id="password" maxlength="16" size="20" autocomplete="new-password" />

score 1 · Accepted Answer

我认为这个问题是特定于浏览器（chrome）的，因此您可以通过仅添加 chrome 的条件来进行管理，例如：

@Html.PasswordFor(model => model.Password, new { @autocomplete = (Request.Browser.Browser.ToLower().Contains("chrome") ? "new-password" : "off") })

@autocomplete = (Request.Browser.Browser.ToLower().Contains("chrome") ? "new-password" : "off")

score 0 · Accepted Answer

单击，输入或专注于输入密码时使用 JQuery 应用只读并在 50 毫秒后删除只读...效果不显示下拉列表

window.jQuery('form input[type="password"]').on('focus input click', function(e) {
  var self = $(this);
  self.prop('readonly', true);
  setTimeout(function() {
    self.prop('readonly', false);
  }, 50);
});

score 0 · Accepted Answer

我在尝试过其他建议后发现了这个解决方案——我的问题出在 Edge 上。我尝试使用随机字符串作为自动完成值和上面建议的其他方法，但这些方法并没有解决问题，因为我后来发现问题出在缓存上。

清除浏览器缓存有帮助。

score 0 · Accepted Answer

刚刚找到另一个简单的解决方案，并在所有 3 个主要浏览器 Chrome Firefox 和 Opera 上为我工作

<input type="text" onfocus="this.type='email'"/>
<input type="text" onfocus="this.type='password'"/>

score -1 · Accepted Answer

    <input type="password" id="byLast" class="bump25" autocomplete="new-password" onclick="this.type='text'" /> )

这对我有用

html - autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete

29 回答 29

Related

Reference