Html 自动完成=关闭，不在chrome中工作

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

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

现在的问题是，当页面在谷歌浏览器中加载时，它发现type=“Password”它会在信用卡文本框中加载保存电子邮件id，并在验证码中加载密码

现在试着解决这个问题，我试着做如下的事情

<form autocomplete="off">

<asp:textbox autocomplete="off">

---

上述尝试对我不起作用。我曾在谷歌上搜索过它，但幸运的是，它对我不起作用。

似乎Chrome现在忽略了autocomplete=“off”，除非它从v34开始就在

标签上

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

方法1:

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

到

方法3: 浏览器以只读模式自动填充

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

---

这很好地工作，并且与MDL（材料设计灯）兼容：

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

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

---

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

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

使用此解决方案

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

---

Chrome不支持在表单级别为某些输入字段设置autocomplete=“off”。 有两种解决方案：

• 在表单中，如果只有两个或三个字段忽略了autocomplete=“off”，则使用字段名称本身作为autocomplete值。i、 e.自动完成=

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

  if（$.browser.chrome）{
  $（文档）。在（'焦点单击轻触'，'输入'，函数（）上）{
  $（this.attr（“自动完成”，“块”）；
  });
  }否则{
  $（文档）。在（'焦点单击轻触'，'输入'，函数（）上）{
  $（this.attr（“自动完成”，“关闭”）；
  });
  }

---

非常简单，您可以按照以下步骤操作

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

---

是否不能在需要文本类型的地方使用密码类型？无论上述方法如何，如果名称相同，Chrome将无条件地处理自动完成。 所以，我使用了一种方法来随机更改名称，如下所示

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

---

我在没有JAVASCRIPT的情况下成功地删除了自动完成和输入历史建议，如下所示：

HTML：（结合使用type=“search”和autocomplete=“off”就可以实现这一点）

---

也可以是客户端缓存。尝试在页面上设置适当的过期标题，以防止Chrome从缓存/内存加载页面。方法3似乎是浏览器中最可靠和标准化的方法

    // 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');
    });

automcomplete="off" or automcomplete="false" 

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

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

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

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

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

<input type="search" autocomplete="off" />

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}