赞成

Question

我们如何在某些<input>上停用Chrome的自动填充功能，以防止在页面加载时自动填充这些功能？

同时我需要启用自动完成功能，因此用户仍然可以通过单击输入或键入输入来查看建议列表。可以这样做吗？

编辑：如果您觉得有必要，可以随意使用普通的Javascript或jQuery，或者您觉得这样可以简化您的解决方案。

Answer 1

有点晚了，但这是我的傻瓜式解决方案，对于用户必须输入新密码的注册/注册页面等页面非常有用。

<form method="post">
    <input type="text" name="fname" id="firstname" x-autocompletetype="given-name" autocomplete="on">
    <input type="text" name="lname" id="lastname" x-autocompletetype="family-name" autocomplete="on">
    <input type="text" name="email" id="email" x-autocompletetype="email" autocomplete="on">
    <input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;">
    <input type="password" name="password" id="password" autocomplete="off">
</form>

Chrome会检测到两个密码输入，但不会自动填写密码字段。但是，字段id =“password_fake”将通过CSS隐藏。因此用户只能看到一个密码字段。

我还添加了一些额外的属性“x-autocompletetype”，这是一个chrome实验特定的自动填充功能。在我的示例中，chrome将自动填充名字，姓氏和电子邮件地址，而不是密码字段。

Answer 2

修复：阻止浏览器自动填充

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

更新： Mobile Safari将光标设置在字段中，但不显示虚拟键盘。 New Fix像以前一样工作，但处理虚拟键盘：

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

现场演示https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

<强>解释如果用户关注此输入字段（焦点包含鼠标单击和通过字段标记），则此代码段可以通过设置只读模式并更改为可写，而不是填充空白或窗口加载功能。

不需要jQuery，纯JavaScript。

Answer 3

经过多次努力，我发现解决方案比你想象的要简单得多：

而不是autocomplete="off"只需使用autocomplete="false";）

试试这个......

$(document).ready(function () {
    $('input').attr('autocomplete', 'false');
});

Answer 4

我偶然发现了今天奇怪的镀铬自动填充行为。碰巧在没有明显原因的情况下启用了名为“embed”和“postpassword”（填写登录名和密码）的字段。这些字段已经自动完成设置为关闭。

所描述的方法似乎都不起作用。另一个答案的方法都没有效果。我基于斯蒂尔的答案得出了我自己的想法（它可能确实有效，但我在我的应用程序中需要固定的后期数据格式）：

在真实密码之前，添加这两个虚拟字段：

<input type='text' style='display: none'>
<input type='password' style='display: none'>

只有这一个终于为我的表单完全禁用了自动填充。

令人遗憾的是，禁用这种基本行为就是那种艰难和苛刻的行为。

Answer 5

我无法让我的Chrome在页面加载时自动自动填充以进行测试，但您可以尝试将autocomplete="off"添加到字段中，然后在加载时删除该属性：

$(window).load(function() { // can also try on document ready
    $('input[autocomplete]').removeAttr('autocomplete');
});

Answer 6

这可能会有所帮助：https://stackoverflow.com/a/4196465/683114

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

看起来在加载时，它会使用自动填充查找所有输入，添加其outerHTML并删除原始文件，同时保留值和名称（轻松更改以保留ID等）

如果保留自动填充文本，您只需设置

即可

var text = "";   /* $(this).val(); */

从发布此内容的原始表单中，它声称保留自动填充功能。：）

祝你好运！

Answer 7

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

创建时不要将输入字段声明为类型密码，而是添加一个就绪事件监听器来为您添加：

function createSecretTextInput(name,parent){
    var createInput = document.createElement("input");
    createInput.setAttribute('name', name);
    createInput.setAttribute('class', 'secretText');
    createInput.setAttribute('id', name+'SecretText');
    createInput.setAttribute('value', 'test1234');

    if(parent==null)
       document.body.appendChild(createInput);
    else
        document.getElementById(parent).appendChild(createInput);

    $(function(){
        document.getElementById(name+'SecretText').setAttribute('type', 'password');
    });
};

createSecretTextInput('name', null);

http://jsfiddle.net/

Answer 8

一种解决方案是使用空白字符自动填充输入，并使焦点清晰。

示例：http://nfdb.net/autofill.php

<!doctype html>
<html>
    <head>
        <title>Autofill Test</title>
        <script>
            var userfield;

            // After the document has loaded, manipulate DOM elements.
            window.addEventListener('load', function() {

                // Get the username field element.
                userfield = document.getElementById('user');

                // Listen to the 'focus' event on the input element.
                userfield.addEventListener('focus', function() {

                    // Checks if the value is the EM space character,
                    // and removes it when the input is recieves focus.
                    if (this.value == '\u2003') this.value = ''

                }, false);

                // Listen to the 'blur' event on the input element.
                // Triggered when the user focuses on another element or window.
                userfield.addEventListener('blur', function() {

                    // Checks if the value is empty (the user hasn't typed)
                    // and inserts the EM space character if necessary.
                    if (this.value == '') this.value = '\u2003';

                }, false);
            }, false);
        </script>
    </head>
    <body>
        <form method="GET" action="">
            <input id="user" name="username" type="text" value="&#8195;"/><br/>
            <input name="password" type="password" value=""/><br/>
            <input type="submit" value="Login">
        </form>
    </body>
</html>

这应该会阻止浏览器自动填充字段，但仍允许它们自动填写。

这是另一个在页面加载后清除表单输入的示例。这种方法的优点是输入中不会有任何空格字符，缺点是自动填充值可能会在几毫秒内可见。

http://nfdb.net/autofill2.php

<!doctype html>
<html>
    <head>
        <title>Autofill Test</title>
        <script>
            var userfield, passfield;

            // Wait for the document to load, then call the clear function.
            window.addEventListener('load', function() {

                // Get the fields we want to clear.
                userfield = document.getElementById('user');
                passfield = document.getElementById('pass');

                // Clear the fields.
                userfield.value = '';
                passfield.value = '';

                // Clear the fields again after a very short period of time, in case the auto-complete is delayed.
                setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 50);
                setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 100);

            }, false);
        </script>
    </head>
    <body>
        <div>This form has autofill disabled:</div>
        <form name="login" method="GET" action="./autofill2.php">
            <input id="user" name="username" type="text" value=""/><br/>
            <input id="pass" name="password" type="password" value=""/><br/>
            <input type="submit" value="Login">
        </form>
        <div>This form is untouched:</div>
        <form name="login" method="GET" action="./autofill2.php">
            <input name="username" type="text" value=""/><br/>
            <input name="password" type="password" value=""/><br/>
            <input type="submit" value="Login">
        </form>
    </body>
</html>

Answer 9

autocomplete="off"正在使用Chrome V44（和Canary V47）上的输入

Answer 10

到目前为止，我发现这个工作正常，必须设置1ms的超时时间，以便在Chrome自动填充后完成操作..

$(window).on('load', function() {
    setTimeout(function(){
        $('input[name*=email],input[name*=Password]').val('-').val(null);
    },1);
});

我想知道是否有任何方法可以将此功能附加到chrome自动完成触发，甚至重新声明它

Answer 11

不是一个漂亮的解决方案，但在Chrome 56上工作：

<INPUT TYPE="text" NAME="name" ID="name" VALUE=" ">
<INPUT TYPE="password" NAME="pass" ID="pass">

注意值的空格。然后：

$(document).ready(function(){
   setTimeout("$('#name').val('')",1000);
});

Answer 12

我不喜欢使用setTimeout甚至有奇怪的临时输入。所以我想出了这个。

只需将密码字段类型更改为文本

即可

<input name="password" type="text" value="">

当用户关注该输入时，将其再次更改为密码

$('input[name=password]').on('focus', function (e) {
    $(e.target).attr('type', 'password');
});

使用最新的Chrome（版本54.0.2840.71（64位））

Answer 13

这是我发现的最新解决方案。这会阻止Google填写字段并在您输入任何内容之前将其突出显示为黄色。基本上，如果你把＆＃34; display：none＆＃34;在该领域，谷歌足够聪明，可以忽略它并转移到下一个领域。如果你把＆＃34; visibility：hidden＆＃34;虽然它将其视为一种似乎干扰其计算的形式的字段。不需要javascript。

<form method='post'>
    <input type='text' name='u' size='16'/>
    <input type='password' name='fake' size='1' style='width:1px;visibility:hidden'/><br />
    <input type='password' name='p' size='16'/>
</form>

Answer 14

我的解决方案基于dsuess用户解决方案，这在我的IE中无效，因为我必须再次单击文本框才能输入。因此我只将其改编为Chrome：

$(window).on('load', function () {
    if (navigator.userAgent.indexOf("Chrome") != -1) {
        $('#myTextBox').attr('readonly', 'true');
        $('#myTextBox').addClass("forceWhiteBackground");
        $('#myTextBox').focus(function () {
            $('#myTextBox').removeAttr('readonly');
            $('#myTextBox').removeClass('forceWhiteBackground');
        });
    }
});

在你的CSS中添加：

.forceWhiteBackground {
    background-color:white !important;
}

Answer 15

Chrome密码管理器正在查找type="password"的输入元素并填写已保存的密码。它也会忽略autocomplete="off"属性。

此处修复了最新的 Chrome（版本40.0.2181.0金丝雀）：

<input name="password">

JS：

setTimeout(function() {
    var input = document.querySelector("input[name=password]");
    input.setAttribute("type", "password");
}, 0)

Answer 16

var fields = $('form input[value=""]');
fields.val(' ');
setTimeout(function() {
    fields.val('');
}, 500);

Answer 17

派对有点晚了......但是这可以通过一些jQuery轻松完成：

$(window).on('load', function() {
    $('input:-webkit-autofill').each(function() {
        $(this).after($(this).clone(true).val('')).remove();
    });
});

赞成

删除自动填充文字和背景颜色。
在字段上保留自动填充功能。
将任何事件/数据绑定到输入元素。

缺点

页面加载时自动填充字段的快速闪烁。

Answer 18

自动填充与输入的名称属性一起使用，因此如果为“firstname”这样的输入设置名称，chrome将填充它。

如果要禁用它，请使用奇怪的名称，如“超人名”。

Javascript无法解决您的问题。

第二种解决方案：您可以使用相同的名称隐藏输入，并使用其他输入设置其值。我用jquery简化了Js。

<form action="handlerfile.php" method="post">
<input type="text" id="1" onclick="$("#2").val($("#1").val())"/>
<input type="hidden" name="username" id="2">
</form>

Answer 19

最好使用禁用输入，以防止自动完成。

<input type="password" ... disabled />

在Chrome中禁用表单自动填充，而不会禁用自动填充功能

19 个答案:

赞成

缺点