Html 在 Chrome 中禁用表单自动填充而不禁用自动完成

Disable form autofill in Chrome without disabling autocomplete

提问by Elias Zamaria

How can we disable Chrome's autofill feature on certain <input>s to prevent them from being automatically populated when the page loads?

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

At the same time I need to keep autocomplete enabled, so the user can still see the list of suggestions by clicking on the input or typing in it. Can this be done?

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

EDIT:Feel free to use plain Javascript or jQuery if you feel it is necessary or you feel like it would make your solution simpler.

编辑：如果你觉得有必要或者你觉得它会让你的解决方案更简单，请随意使用普通的 Javascript 或 jQuery。

回答by Mirror318

Here's the magic you want:

这是你想要的魔法：

    autocomplete="new-password"

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

Chrome 故意忽略autocomplete="off"和autocomplete="false"。但是，他们new-password作为特殊条款加入，以阻止自动填写新密码表单。

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.

我在密码输入中输入了上面一行，现在我可以编辑表单中的其他字段，并且密码不会自动填充。

回答by Mark Panya Wienands

A little late, but here's my fool proof solution useful for pages like the sign up/registration page where the user has to input a new password.

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

<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 will detect two password inputs and will not auto fill the password fields. However, the field id="password_fake" one will be hidden via CSS. So the user will only see one password field.

Chrome 会检测两次密码输入，并且不会自动填充密码字段。但是，字段 id="password_fake" 将通过 CSS 隐藏。所以用户只会看到一个密码字段。

I've also added some extra attributes "x-autocompletetype" which is a chrome experimental specific auto fill feature. From my example, chrome will autofill in the first name, last name and email address, and NOT the password field.

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

回答by dsuess

Fix:prevent browser autofill in

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

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

Update: Mobile Safari sets cursor in the field, but does not show virtual keyboard. New Fix works like before but handles virtual keyboard:

更新：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();  }" />

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/

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

// UpdateEnd

// 更新结束

ExplanationInstead of filling in whitespaces or window-on-load functions this snippet works by setting readonly-mode and changing to writable if user focuses this input field (focus contains mouse click and tabbing through fields).

说明该代码段不是填充空格或加载窗口函数，而是通过设置只读模式并在用户聚焦此输入字段时更改为可写来工作（焦点包含鼠标单击和通过字段的 Tab 键）。

No jQuery needed, pure JavaScript.

不需要 jQuery，纯 JavaScript。

回答by Dipen Dedania

After a lot of struggle, I have found that the solution is a lot more simple that you could imagine:

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

Instead of autocomplete="off"just simply use autocomplete="false";)

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

Try this...

尝试这个...

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

回答by czaks

I stumbled upon the weird chrome autofill behaviour today. It happened to enable on fields called: "embed" and "postpassword" (filling there login and password) with no apparent reason. Those fields had already autocomplete set to off.

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

None of the described methods seemed to work. None of the methods from the another answer worked as well. I came upon my own idea basing on Steele's answer (it might have actually worked, but I require the fixed post data format in my application):

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

Before the real password, add those two dummy fields:

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

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

Only this one finally disabled autofill altogether for my form.

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

It's a shame, that disabling such a basic behavior is that hard and hacky.

很遗憾，禁用这种基本行为是如此困难和笨拙。

回答by Jeffery To

I'm not able to get my Chrome to autofill automatically on page load to test this, but you can try adding autocomplete="off"to your fields, then removing the attribute on load:

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

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

回答by nighthawk454

This might help: https://stackoverflow.com/a/4196465/683114

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

It looks like on load, it finds all inputs with autofill, adds their outerHTML and removes the original, while preserving value and name (easily changed to preserve ID etc)

它看起来像在加载时，它使用自动填充找到所有输入，添加它们的外层 HTML 并删除原始内容，同时保留值和名称（易于更改以保留 ID 等）

If this preserves the autofill text, you could just set

如果这保留了自动填充文本，您可以设置

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

From the original form where this was posted, it claims to preserve autocomplete. :)

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

Good luck!

祝你好运！

回答by Arvy

Not a beautiful solution, but worked on Chrome 56:

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

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

Note a space on the value. And then:

请注意值上的空格。进而：

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

回答by Nimphious

One solution would be to auto-fill the inputs with whitespace characters, and have them clear on focus.

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

Example: http://nfdb.net/autofill.php

示例：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>

This should stop the browser from auto-filling the fields, but still allow them to auto-complete.

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

Here's another example that clears the form inputs after the page loads. The advantage of this method is that the inputs never have any whitespace characters in them, the disadvantage is that there's a small possibility that the auto-filled values may be visible for a few milliseconds.

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

http://nfdb.net/autofill2.php

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>

回答by Matthew

I was recently faced with this problem, and with no simple solution since my fields can be prepopulated, I wanted to share an elegant hack I came up with by setting password type in the ready event.

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

Don't declare your input field as type password when creating it, but add a ready event listener to add it for you:

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

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/

http://jsfiddle.net/