50

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

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

编辑：如果您觉得有必要，或者您觉得这会使您的解决方案更简单，请随意使用纯 Javascript 或 jQuery。

4

21 回答 21

86

Here's the magic you want:

    autocomplete="new-password"

Chrome intentionally ignores autocomplete="off" and autocomplete="false". However, they put new-password in as a special clause to stop new password forms from being auto-filled.

I put the above line in my password input, and now I can edit other fields in my form and the password is not auto-filled.

于 2016-04-11T02:29:37.600 回答
43

有点晚了，但这是我的万无一失的解决方案，对于用户必须输入新密码的注册/注册页面等页面很有用。

<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 将自动填写名字、姓氏和电子邮件地址，而不是密码字段。

于 2013-10-04T05:59:03.270 回答
26

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

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

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

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

// 更新结束

说明 如果用户关注此输入字段（焦点包含鼠标单击和选项卡浏览字段），此代码段不是填充空格或加载窗口函数，而是通过设置只读模式并更改为可写来工作。

不需要 jQuery，纯 JavaScript。

于 2015-02-22T20:59:11.370 回答
12

经过一番挣扎，我发现解决方案比您想象的要简单得多：

而不是autocomplete="off"简单地使用autocomplete="false";)

尝试这个...

$(document).ready(function () {
    $('input').attr('autocomplete', 'false');
});
于 2015-05-21T11:01:37.267 回答
10

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

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

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

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

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

很遗憾，禁用这种基本行为是如此困难和骇人听闻。

于 2014-04-10T10:04:01.483 回答
4

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

$(window).load(function() { // can also try on document ready
    $('input[autocomplete]').removeAttr('autocomplete');
});
于 2012-06-17T16:23:31.410 回答
4

不是一个漂亮的解决方案，但适用于 Chrome 56：

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

请注意值上的空格。接着：

$(document).ready(function(){
   setTimeout(() => $('#name').val(''),1000);
});
于 2017-03-02T21:40:08.217 回答
2

这可能会有所帮助：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(); */

从发布的原始表格中，它声称保留自动完成功能。:)

祝你好运！

于 2012-06-19T14:35:01.893 回答
1

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

创建时不要将输入字段声明为类型密码，而是添加一个准备好的事件侦听器来为您添加它：

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/

于 2014-07-18T13:58:07.263 回答
1

一种解决方案是用空白字符自动填充输入，并让它们清晰地集中在焦点上。

示例： 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>
于 2012-06-12T17:58:37.757 回答
0

Chrome 密码管理器正在寻找输入元素type="password"并填写已保存的密码。它也忽略了autocomplete="off"财产。

这是针对最新Chrome（版本 40.0.2181.0 canary）的修复：

<input name="password">

JS：

setTimeout(function() {
    var input = document.querySelector("input[name=password]");
    input.setAttribute("type", "password");
}, 0)
于 2014-10-08T15:11:02.203 回答
0

派对有点晚了......但这很容易用一些jQuery完成：

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

优点

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

缺点

  • 页面加载时自动填充字段的快速闪烁。
于 2013-07-20T00:29:39.603 回答
0 
var fields = $('form input[value=""]');
fields.val(' ');
setTimeout(function() {
    fields.val('');
}, 500);
于 2014-04-17T12:54:25.237 回答
0

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

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

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

于 2014-08-25T15:20:09.340 回答
0

我不喜欢使用 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-bit))

于 2016-11-03T17:28:39.893 回答
0

autocomplete="off"关于现在在 Chrome V44（和 Canary V47）上工作的输入

于 2015-08-31T08:32:02.480 回答
0

My solution is based on dsuess user solution, which didn't work in IE for me, because I had to click one more time in the textbox to be able to type in. Therefore I adapted it only to 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');
        });
    }
});

In your css add this:

.forceWhiteBackground {
    background-color:white !important;
}
于 2015-12-30T19:04:05.077 回答
0

最简单的解决方案，为用户名字段提供一个值“”（您仍然可以将其称为“用户名”）。

如果该值可以由用户输入的值填充（通常是您正在验证的表单的情况），请在尚未设置时提供值“ ”。在 PHP 中，

if(trim($username) == ''){$username = ' ';}

<input type='text' value = '$username' name = 'Username' />

我实际上认为用户名和密码的自动完成功能有效地将访问您所有帐户的权限授予访问您计算机的任何人，无论您的密码多么晦涩......

于 2015-09-10T16:29:07.263 回答
0

这是我发现的最新解决方案。这会阻止 Google 在您输入任何内容之前填写字段并将它们突出显示为黄色。基本上，如果您将“display:none”放在该字段上，Google 会很聪明地忽略它并移至下一个字段。如果您输入“可见性：隐藏”，尽管它会将其视为表单中的一个字段，这似乎会干扰其计算。不需要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>
于 2016-08-25T13:20:24.810 回答
-1

自动填充适用于输入的名称属性，因此如果您为“名字”等输入设置名称，chrome 将填充它。

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

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>
于 2012-06-15T15:33:12.027 回答
-6

您最好使用 disabled 作为输入，以防止自动完成。

<input type="password" ... disabled />
于 2015-08-31T13:35:03.440 回答