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

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

提问by user2594463

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

我有一个禁用自动完成功能的表单，但它不起作用并使自动完成功能在 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>

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

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

采纳答案by álvaro González

Browser's normally have two related yet different features regarding forms:

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

• Form auto-complete, where items of <input type="text">type (and similar) collect typed values and offer them back in the form of a drop-down list.
  (It's a simple feature that works pretty well.)

• Password manager, where browser prompts to remember username/password combinations when it detects you've submitted a login form. When returning to the site, most browsers display available usernames in a drop-down box (Firefox, Chrome, Internet Explorer...) but some have a toolbar button (Opera). Also, Chrome highlights the fields in hard-coded yellow.
  (This depends on heuristics and might fail on certain pages.)

• 表单自动完成，其中<input type="text">类型（和类似）的项目收集类型值并以下拉列表的形式提供它们。
  （这是一个简单的功能，效果很好。）

• 密码管理器，当浏览器检测到您已提交登录表单时，它会提示您记住用户名/密码组合。返回站点时，大多数浏览器会在下拉框中显示可用的用户名（Firefox、Chrome、Internet Explorer...），但有些浏览器具有工具栏按钮 (Opera)。此外，Chrome 以硬编码黄色突出显示字段。
  （这取决于启发式方法，可能会在某些页面上失败。）

There's an edge case with forms tagged as autocomplete="off". What happens if it's a login form and the user has previously stored a username/password? Actually removingthe password from the local database looks like inappropriate so probably no browser does so. (In fact, data from form auto-complete is not erased either.) Firefox decides to give power to the user: you have a password, so I'll let you use it. Chrome decides to give power to the site.

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

回答by sujivasagam

You can just make the field readonly while form loading. While the field get focus you can change that field to be editable. This is simplest way to avoid auto complete.

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

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

回答by Arivarasan L

When I faced the same problem I resolved by creating a temporary text box above the password field and hide it

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

like this,

像这样，

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

It will make the usernametext field not to show any previously typed words in a drop down. Since there is no attribute like name, idfor the input field <input type="text" style="display:none;">it wouldn't send any extra parameters also.

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

I am Not sure this is a good practice, but it will resolve the issue.

我不确定这是一个很好的做法，但它会解决问题。

回答by sunny rai

This will prevent the auto-filling of password into the input field's (type="password").

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

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

回答by alexpirine

Just add the autocomplete="new-password"attribute to your password input field.

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

To learn more about autocomplete: https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password

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

回答by Jan Capuder

I've tried all sort of workarounds, but just that combination worked on all browsers in my case:

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

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

And it's quite clean solution too :)

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

回答by Sieg

What worked for me, was use autocomplete="new-password" only in input type="password", like this:

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

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

Independently of how many input have the form.

与表单有多少输入无关。

回答by Venki WAR

For text type use autocomplete="off"or autocomplete="false"

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

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

For password type use autocomplete="new-password"

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

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

回答by Mahdi Afzal

autocomplete=offis largely ignored in modern browsers - primarily due to password managers etc.

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

You can try adding this autocomplete="new-password"it's not fully supported by all browsers, but it works on some

您可以尝试添加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>

回答by jlowcs

Here's a hack that seems to work in Firefox and Chrome.

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

In Firefox, having a disabled text field just before the password field seems to do the trick, even if it is hidden (disabled: none)

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

In Chrome, it hasto be visible though.

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

So I suggest something like this :

所以我建议这样的事情：

HTML:

HTML：

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

CSS :

CSS :

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