我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。

尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。


当前回答

以下是我在Chrome版本51.0.2704.106上的工作方式。<input id="user_name" type="text" name="user_name" autocomplete="off" required /> And in combination with <input id="user_password" type="password" name="user_password" autocomplete="new-password" required />。我的问题是,在实现new-password之后,它仍然会在user_name字段上显示用户名的下拉列表。

其他回答

TL;DR:告诉Chrome这是一个新的密码输入,它不会提供旧的密码作为自动补全建议:

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

由于设计决定,Autocomplete ="off"不起作用——大量研究表明,如果用户可以将密码存储在浏览器或密码管理器中,他们就会有更长时间和更难破解密码。

自动完成的规范已经改变,现在支持各种值,使登录表单更容易自动完成:

<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">

<!-- current-password will populate for the matched username input  -->
<input type="password" autocomplete="current-password" />

如果你不提供这些Chrome浏览器仍然试图猜测,当它做它忽略autocomplete="off"。

解决方案是密码重置表单也存在自动完成值:

<label>Enter your old password:
    <input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
    <input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
    <input type="password" autocomplete="new-password" name="pass-repeat" />
</label>

你可以使用autocomplete="new-password"标志告诉Chrome浏览器不要猜测密码,即使它已经为这个网站存储了一个。

Chrome还可以直接使用凭据API管理网站的密码,这是一个标准,最终可能会得到普遍支持。

对我来说,在表单和输入中设置autocomplete=“off”是有效的。但可以是片状的。有时它会建议密码或一些保存的登录名+密码选项。但不要提前预约。

Chrome版本:81.0.4044.138

CodePen

<表单角色=“表单” 方法=“发布” 操作=“#” 自动完成=“关闭”> <标签=“登录”>登录</label><br/> <输入类型=“文本” 名称=“登录” id=“登录” 自动完成=“关闭” /> <br/><br/> <标签=“密码”>密码</label><br/> <输入类型=“密码” 名称=“密码” 自动完成=“关闭” /> <br/><br/> <输入类型=“提交” 名称=“提交” 值=“提交” /> </form>

其他选项:

删除'form'标签…或者在提交之前将其从'div'更改为'form'。 用javascript和一些contentteditable ="true"字段可以让你的方式…

通常每隔几个月我就得另找工作。

写一个2020年以上的答案,如果这对任何人都有帮助的话。我尝试了上面的许多组合,但在我的案例中,有一个关键的组合是缺失的。即使我一直保持autocomplete="nope"一个随机字符串,它并不为我工作,因为我有name属性缺失!

所以我保留了name='password' And autocomplete = "new-password"

对于用户名,我保留了name="usrid" //不要保留包含'用户'的字符串

and autocomplete = "new-password" //也一样,所以谷歌停止建议密码(管理密码下拉菜单)

这对我来说非常有效。 (我为Cordova/ionic使用的Android和iOS web视图做到了这一点)

<ion-input [type]="passwordType" name="password" class="input-form-placeholder" formControlName="model_password"
        autocomplete="new-password" [clearInput]="showClearInputIconForPassword">
</ion-input>

我用另一种方法解决了。你可以试试这个。

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

我不得不在drupal页面上用一个巨大的webform来解决这个问题。因为我不能编辑每个输入的html代码,所以我想出了下面的通用jQuery解决方案。

<script>

    // Form Autocomplete FIX
    function is_mobile() {
        if( screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ) {
            return true;
        }
        return false;
    }
    jQuery( 'input[autocomplete="off"]' ).each( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).attr( 'readonly', true );
    } );
    jQuery( 'input[autocomplete="off"]' ).focus( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).removeAttr( 'readonly' );
        jQuery( this ).focus();
    } );
    jQuery( 'input[autocomplete="off"]' ).blur( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).attr( 'readonly', true );
    } );

</script>

浏览器检测从这里开始。

我想有可能优化这段代码(我很想获得一些建议),但您将从中获得想法。