自动完成=关闭在 chrome 中不起作用

Posted 2023-02-24

【中文标题】自动完成=关闭在 chrome 中不起作用

【英文标题】：autocomplete= off not working in chrome

【发布时间】：2015-07-24 14:16:00

【问题描述】：

我们正在开发一个 Web 应用程序，其中有一个支付页面。

我们有两个文本框，第一个是信用卡号，第二个是验证码，输入=“密码”。

现在的问题是当页面在 google-chrome 中加载时，它发现 type="Password" 它加载了将电子邮件 ID 保存在信用卡文本框中和密码保存在验证码中。

现在尝试解决这个问题，我尝试了类似下面的方法。

<form autocomplete="off">

<asp:textbox autocomplete="off">

以上尝试对我不起作用。我在谷歌上搜索它，但幸运的是它不适合我。

【问题讨论】：

也可以是客户端缓存。尝试在页面上设置适当的过期标头，以防止 Chrome 从缓存/内存中加载页面。

如果您的浏览器忽略 autocomplete="off"，添加一个随机字符串代替 'off' 将解决问题。例如，autocomplete="autocomplete_off_hack_xfr4!k"

【参考方案1】：

Chrome 现在似乎忽略了 autocomplete="off"，除非它在 ​​v34 之后出现在 <form autocomplete="off"> 标签上。

您不能通过创建隐藏输入来作弊。自动完成功能将获取第一个输入文本来填充数据。

方法一：

<form id="" method="post" action="" autocomplete="off">
    <input type="text" style="display:none" />
    <input type="password" style="display:none">
    <asp:textbox autocomplete="off">
</form>

所以把它放在你的文本框之前。

<input type="text" style="display:none" />

方法二：

改变

autocomplete="off" 

到

autocomplete="false" 

方法三： 浏览器通过只读模式自动填充。

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

方法四：

对于用户名密码组合。 Chrome 启发式会寻找这种模式。

<input type="text" onfocus="this.type='password'">

方法五： jQuery

if ($.browser.webkit) 
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');

【讨论】：

方法 3 似乎是跨浏览器最可靠和最标准化的

这些方法都不适用于我的 Chrome。版本 94.0.4606.71（正式版）（64 位）

【参考方案2】：

这是唯一适用于自动完成和 Chrome 的自动填充的解决方案： 调用new this.props.google.maps.places.Autocomplete后也可以使用

在表单标签上添加 autocomplete="off"。

直接在表单内的输入上设置 autocomplete="none" 并再次将属性设置为焦点。

 <form autocomplete="off">
     <input type="text" autocomplete="none" onfocus="this.setAttribute('autocomplete', 'none');"/>
 </form>

【参考方案3】：

如果您想保持白色作为输入背景颜色，这是可行的

<input type="password" class="form-control" id="password" name="password" placeholder="Password" readonly onfocus="this.removeAttribute('readonly');" style="background-color: white;">

【参考方案4】：

使用这个解决方案

<input type="password" class="form-control auto-complete-off" id="password" name="password" autocomplete="new-password">

【参考方案5】：

此解决方案不再适用于 chrome 95 及更高版本，

尝试使用带有文本类型的普通输入，禁用复制和粘贴，然后添加具有属性 -webkit-text-security 的样式以在键入时添加字符掩码

#并不是说这个css属性不是通用的，正如这里提到的https://developer.mozilla.org/fr/docs/Web/CSS/-webkit-text-security

【参考方案6】：

这行得通：

$(document).ready(function () 

    setTimeout(() => 
        $('input').attr("readonly", 'readonly');
        $('input').attr("onfocus", "this.removeAttribute('readonly')");
    , 100);
    
);

【参考方案7】：

这很好用，也兼容 MDL（Material Design Light）：

// Fix chrome's ignore on autocomplete=off
$('input[autocomplete=off]').each(function()
    var copy = $(this).clone();
    copy.val('');
    copy.removeAttr('autocomplete');
    copy.insertAfter($(this));
    $(this).hide().removeAttr('required id class');
);

【参考方案8】：

这就是我解决问题的方法。

$("body").on('focus',':input', function (e) 
    $(this).attr('autocomplete', 'off');
    $(this).attr('autocapitalize', 'off');
    $(this).attr('autocorrect', 'off');
    $(this).attr('spellcheck', 'false');
);

或

<input type="text" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false">

【参考方案9】：

Chrome 在某些输入字段的表单级别不支持autocomplete="off"。 有两种解决方案：

在您的表单中，如果只有两个或三个字段忽略 autocomplete="off"，则使用字段名称本身作为自动完成值。即自动完成=

<form:input type="text" id="name" path="name" autocomplete="name"/>

不要为每个字段手动定义字段名称，而是在页面加载时或之后为所有文本类型的输入使用脚本。

if ($.browser.chrome)  
    $(document).on('focus click tap', 'input', function() 
        $(this).attr("autocomplete", 'block');
    );
 else 
    $(document).on('focus click tap', 'input', function() 
        $(this).attr("autocomplete", 'off');
    );

【参考方案10】：

是否不能在需要文本类型的地方使用密码类型？不管上面介绍的方法，如果名称相同，Chrome 都会无条件地处理自动完成。 于是，我就用了一个方法，像这样随机改名字。

$(document).on('focus click tap'
    , 'input[autocomplete][autocomplete!=""]:not([data-oname][data-oname!=""])'
    , function() 
    var oname = $(this).attr('name');
    var newName = "random string";  // random string
    $(this).attr("data-oname":oname,"name":newName,autocomplete:newName);
    // A random string should be set for name and autocomplete above.
).on('blur', 'input[data-oname][data-oname!=""]', function() 
    var oname = $(this).attr('data-oname');
    $(this).attr("name":oname).removeAttr('data-oname');
);

【参考方案11】：

automcomplete="off" or automcomplete="false" 

或在输入字段中定义自动完成

$('input[name="password"]').attr('autocomplete', 'off');//Disable cache

【参考方案12】：

很简单，你可以按照这个

let elements = document.querySelectorAll('[autocomplete="off"]');
elements.forEach(element => 
    element.setAttribute("readonly", "readonly");
    element.style.backgroundColor = "inherit";
    setTimeout(() => 
        element.removeAttribute("readonly");
    , 500);
)