当输入类型为密码时,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 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

这将阻止密码自动填入输入字段(type ="password").

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

Answer 5

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

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

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

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

Answer 6

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

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

与有多少输入具有该表单无关。

Answer 7

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

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

Answer 8

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

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

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

Answer 9

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>