Chrome忽略AutoComplete=“Off”

Question

我创建了一个web应用程序，它使用了一个下拉标签框。这在除了Chrome浏览器（版本21.0.1180.89)之外的所有浏览器中都很好用。

尽管input字段和form字段都具有autocomplete=“off”属性，但Chrome坚持要显示该字段以前条目的下拉历史记录，这将抹掉tagbox列表。

Answer 1

更新

现在看来，Chrome忽略了style=“display：none；”或style=“visibility：hidden；属性。

您可以将其更改为以下内容：

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

根据我的经验，Chrome只自动完成第一个和前面的。所以我补充了一句：

<input style="display:none">
<input type="password" style="display:none">

到

的顶部，并解决了大小写。

Answer 2

防止自动完成用户名（或电子邮件）和密码：

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

阻止自动完成字段（可能不起作用）：

<input type="text" name="field" autocomplete="nope">

说明：

尽管具有autocomplete=“off”，autocomplete仍然对有效，但您可以将off更改为随机字符串，如nope。

其他禁用字段自动完成的“解决方案”（这不是正确的方法，但它有效）：

1.

HTML：

<input type="password" id="some_id" autocomplete="new-password">

JS（onload）：

(function() {
    var some_id = document.getElementById('some_id');
    some_id.type = 'text';
    some_id.removeAttribute('autocomplete');
})();

或使用jQuery：

$(document).ready(function() {
    var some_id = $('#some_id');
    some_id.prop('type', 'text');
    some_id.removeAttr('autocomplete');
});

2.

HTML：

<form id="form"></form>

JS（onload）：

(function() {
    var input = document.createElement('INPUT');
    input.type = 'text';
    document.getElementById('form').appendChild(input);
})();

或使用jQuery：

$(document).ready(function() {
    $('<input>', {
        type: 'text'
    }).appendTo($('#form'));
});

使用jQuery添加多个字段：

null

function addField(label) {
  var div = $('<div>');
  var input = $('<input>', {
    type: 'text'
  });
  
  if(label) {
    var label = $('<label>', {
      text: label
    });
    
    label.append(input);
    div.append(label);    
  } else {
    div.append(input);    
  }  
  
  div.appendTo($('#form'));
}

$(document).ready(function() {
  addField();
  addField('Field 1: ');  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>