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

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

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

Answer 2

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

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

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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

我的溶胶：

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

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

Answer 7

我知道这是一个老问题，但浏览器一直在变化。虽然这里提到的一些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 8

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

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

Answer 9

对于密码，它目前无法正常工作。

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

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

Answer 10

在现代浏览器中，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 11

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

干得好。

Answer 12

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

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

Answer 13

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

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

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

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

Answer 14

我认为此问题特定于浏览器（chrome），因此您可以通过仅为chrome添加条件来管理。

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

@autocomplete =（Request.Browser.Browser.ToLower（）。包含（“chrome”）？“new-password”：“off”）

Answer 15

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

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

Answer 16

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

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

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

Answer 17

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

像这样，

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

这将阻止密码自动填入输入字段（type =“password”）。

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

Answer 19

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

要了解有关autocomplete：https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password的更多信息

Answer 20

这是一个似乎适用于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 21

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

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

对我有用的是，仅在input type =“password”中使用autocomplete =“new-password”，如下所示：

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

独立于表单的输入数量。

Answer 23

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

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

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

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

问题描述投票：34回答：23

23个回答

最新问题

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

问题描述 投票：34回答：23

23个回答

最新问题

问题描述投票：34回答：23