我遇到了chrome自动填充行为的几个形式的问题。

表单中的字段都有非常常见和准确的名称,例如“email”、“name”或“password”,并且它们还设置了autocomplete=“off”。

自动完成标志已经成功禁用了自动完成行为,当你开始输入时,会出现一个下拉的值,但没有改变Chrome自动填充字段的值。

这种行为是可以的,除了chrome填充输入不正确,例如填充电话输入与电子邮件地址。客户抱怨过这个问题,所以它被证实在很多情况下都发生了,而不是我在我的机器上本地操作的某种结果。

目前我能想到的唯一解决方案是动态生成自定义输入名称,然后在后端提取值,但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖,改变自动填充行为,可以用来解决这个问题?


当前回答

通过设置自动完成关闭应该在这里工作,我有一个例子,这是谷歌在搜索页面使用。我从inspect element找到了这个。

编辑: 如果off不起作用,则尝试false或nofill。在我的情况下,它是chrome 48.0版本

其他回答

以下是我提出的解决方案,因为谷歌坚持推翻人们似乎做出的每一个变通办法。

选项1 -选择所有文本点击

为你的用户设置输入的值为一个例子(例如your@email.com),或者字段的标签(例如Email),并在你的输入中添加一个名为focus-select的类:

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

下面是jQuery:

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

我真的看不出Chrome会搞砸数值。那太疯狂了。希望这是一个安全的解决方案。

选项2 -设置电子邮件值为一个空间,然后删除它

假设您有两个输入,例如电子邮件和密码,将电子邮件字段的值设置为“”(一个空格),并添加属性/值autocomplete=“off”,然后使用JavaScript清除此设置。您可以将密码值保留为空。

如果用户出于某种原因没有JavaScript,请确保您在服务器端修改了他们的输入(无论如何您都应该这样做),以防他们不删除空格。

下面是jQuery:

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

我将超时设置为15,因为5似乎在我的测试中偶尔可以工作,所以将这个数字增加三倍似乎是一个安全的赌注。

如果没有将初始值设置为空格,Chrome会让输入框显示为黄色,就好像它已经自动填充了一样。

选项3 -隐藏输入

把这个放在表单的开头:

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS:

.hide{ display:none; }

确保您保留了HTML注释,这样其他开发人员就不会删除它!还要确保隐藏输入的名称是相关的。

不同的解决方案,基于webkit。如前所述,任何时候Chrome发现一个密码字段,它自动完成电子邮件。AFAIK,这与autocomplete = [whatever]无关。

为了避免这种情况,将输入类型更改为文本,并以任何您想要的形式应用webkit安全字体。

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

从我所看到的,这至少是安全的输入类型=密码,它的复制和粘贴安全。然而,它是脆弱的,通过删除将删除星号的样式,当然input type = password可以很容易地在控制台中更改为input type = text,以显示任何自动填充的密码,所以它是非常相同的。

这里有一个肮脏的hack -

你的元素在这里(添加了disabled属性):

<input type="text" name="test" id="test" disabled="disabled" />

然后在你的网页底部放一些JavaScript:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

经过几个月的努力,我发现解决办法比你想象的要简单得多:

用autocomplete="false"代替autocomplete="off";)

就这么简单,它的工作就像一个魅力在谷歌Chrome浏览器以及!


2019年8月更新(评论中来自@JonEdiger)

注意:网上有很多信息说浏览器现在处理autocomplete='false'与autocomplete='off'相同。至少在这一刻,它阻止了这三个浏览器的自动完成。

在表单级别设置它,然后对于你想关闭的输入,设置为一些无效的值,比如'none':

<form autocomplete="off"> 
  <input type="text" id="lastName" autocomplete="none"/> 
  <input type="text" id="firstName" autocomplete="none"/>
</form>

通过这个技巧,自动完成功能已经成功禁用。 它的工作原理!

[HTML]

<div id="login_screen" style="min-height: 45px;">
   <input id="password_1" type="text" name="password">
</div>

(JQuery)

$("#login_screen").on('keyup keydown mousedown', '#password_1', function (e) {
    let elem = $(this);

    if (elem.val().length > 0 && elem.attr("type") === "text") {
        elem.attr("type", "password");
    } else {
        setTimeout(function () {
            if (elem.val().length === 0) {
                elem.attr("type", "text");
                elem.hide();
                setTimeout(function () {
                    elem.show().focus();
                }, 1);
            }
        }, 1);
    }

    if (elem.val() === "" && e.type === "mousedown") {
        elem.hide();
        setTimeout(function () {
            elem.show().focus();
        }, 1);
    }

});