Question

我有一个已禁用自动填充功能的表单，但它不起作用并使自动完成功能在firefox及更高版本的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>

当类型从密码更改为文本时，它适用于所有浏览器。任何人都可以帮忙解决这个问题吗？

Answer 1

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

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

Answer 2

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

来解决像这样，

<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;">等属性，因此也不会发送任何额外参数。

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

Answer 3

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

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

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

Answer 4

这样可以防止在输入字段中自动填写密码（输入=＆＃34;密码＆＃34;）。

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

Answer 5

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

详细了解autocomplete：https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password

Answer 6

我的解决方案的灵感如下：

<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的组合并不重要，无论是在表单还是输入字段上。如果没有前两个虚拟字段，则会在任何时间域匹配时进行自动填充，这将毁掉您的一天。

Answer 7

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

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

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

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

Answer 8

对我有用的是，仅在输入类型=“密码”中使用autocomplete =“new-password”，如下所示：

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

独立于表格中有多少输入。

Answer 9

我尝试过各种解决方法，但在我的情况下，这种组合只适用于所有浏览器：

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

这也是非常干净的解决方案：）

Answer 10

这是一个似乎适用于Firefox和Chrome的黑客攻击。

在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;
}

Answer 11

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

<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>

Answer 12

我的溶胶：

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

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

Answer 13

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

        <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>

这很简单...... :)。

Answer 14

对于密码，它目前无效。

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

＆＃13;

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

＆＃13;

Answer 15

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

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

Answer 16

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

Answer 17

在现代浏览器中，

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>

Answer 18

我最近遇到了这个问题，并且没有简单的解决方案，因为我的字段可以预先填充，我想通过在准备好的事件中设置密码类型来分享我提出的优雅黑客。

在创建时不要将输入字段声明为类型密码，而是添加一个ready事件监听器，以便使用jQuery为其添加它：

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

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

Answer 19

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

你在这里。

Answer 20

您绝对不应该这样做

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

autocomplete="current-password"

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

Answer 21

我认为这个问题是特定于浏览器（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”）

Answer 22

在单击、输入或关注输入密码时使用 JQuery apply readonly 并在 50 毫秒后删除 readonly... 效果不显示下拉列表

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);
});

Answer 23

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

使用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">

Answer 24

使用此简单代码

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

Answer 25

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

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

$(function() { $('#password_field').val(''); });

Answer 26

尝试设置autocomplete =“new-password”，如下所示：

var meta_value = itemData
  .Where(x => x.meta_key == "WhatEverYouAreLookingFor")
  .Select(x => x.meta_value)
  .FirstOrDefault();

Answer 27

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

上为我工作

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

Answer 28

  export interface GrpcObject {
    [name: string]: GrpcObject | typeof Client | ProtobufMessage;
  }

这对我有用

当输入类型为密码时，autocomplete ='off'不起作用，并在其上方输入输入字段以启用自动完成功能

28 个答案: