Chrome игнорирует autocomplete = "off"

Я создал веб-приложение, в котором используется тегбокс. Это отлично работает во всех браузерах, кроме браузера Chrome (версия 21.0.1180.89).

Несмотря на то, что оба поля input и поле form имеют атрибут autocomplete="off", Chrome настаивает на том, чтобы отобразить раскрывающийся список предыдущих записей для поля, который стирает список тегов.

Ответы

Ответ 1

ОБНОВИТЬ

Теперь Chrome игнорирует style="display: none;" или style="visibility: hidden; атрибуты.

Вы можете изменить его на что-то вроде:

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

По моему опыту, Chrome только автозаполняет первый <input type="password"> и предыдущий <input>. Поэтому я добавил:

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

В начало <form> и корпус был разрешен.

Ответ 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 до сих пор работает на <input>, несмотря на наличие autocomplete="off", но вы можете изменить off к случайной последовательности, как nope.

Другие "решения" для отключения автозаполнения поля (это не правильный способ сделать это, но он работает):

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

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:

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>

Ответ 3

Похоже, Chrome теперь игнорирует autocomplete="off", если он не находится в теге <form autocomplete="off">.

Ответ 4

Для надежного обхода вы можете добавить этот код на свою страницу макета:

<div style="display: none;">
 <input type="text" id="PreventChromeAutocomplete" 
  name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Chrome учитывает autocomplete = off только тогда, когда в форме имеется хотя бы один другой элемент ввода с любым другим значением автозаполнения.

Это не будет работать с полями пароля - в Chrome они обрабатываются совсем по-другому. Подробнее см. https://code.google.com/p/chromium/issues/detail?id=468153.

ОБНОВЛЕНИЕ: ошибка закрыта как "не будет исправлена" от Chromium Team 11 марта 2016. См. последний комментарий в мой исходный отчет об ошибке, для полного объяснения. TL; DR: использовать семантические атрибуты автозаполнения, такие как autocomplete = "new-street-address", чтобы избежать выполнения автозаполнения Chrome.

Ответ 5

Современный подход

Просто сделайте ваш ввод только для readonly, а в фокусе удалите его. Это очень простой подход, и браузеры не будут заполнять readonly. Поэтому этот метод принят и никогда не будет перезаписан будущими обновлениями браузера.

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

Следующая часть не обязательна. Стиль вашего ввода соответствующим образом, чтобы он не выглядел как вход только для readonly.

input[readonly] {
     cursor: text;
     background-color: #fff;
}

РАБОЧИЙ ПРИМЕР

Ответ 6

В Chrome версии 34 теперь игнорируется autocomplete=off, см. это.

Много обсуждений о том, хорошо это или плохо? Каковы ваши взгляды?

Ответ 7

Хорошо, немного поздно для вечеринки, но кажется, что есть немного недоразумений о том, как autocomplete должен и не должен работать. Согласно спецификациям HTML, пользовательский агент (в данном случае Chrome) может переопределить autocomplete:

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

Пользовательский агент может разрешить пользователю переопределять имя поля автозаполнения элемента, например. изменить его с "off" на "on", чтобы значения запоминались и заполнялись, несмотря на возражения автора страницы или всегда "выключены", никогда не запоминая значения. Однако пользовательские агенты не должны позволять пользователям тривиально переопределять имя поля автозаполнения от "off" до "on" или других значений, так как для пользователя есть существенные последствия для безопасности, если все значения всегда запоминаются независимо от настроек сайта.

Итак, в случае с Chrome разработчики, по сути, сказали: "Мы оставим это для пользователя, чтобы решить в своих предпочтениях, хотят ли они работать autocomplete или нет. Если вы этого не хотите, не делайте этого включите его в своем браузере".

Однако, похоже, что это немного чрезмерно усердно с их стороны по моему вкусу, но так оно и есть. В спецификации также рассматриваются потенциальные последствия для безопасности такого перемещения:

Ключевое слово "off" указывает либо на то, что входные данные управления особенно чувствительны (например, код активации для ядерного оружия); или что это значение, которое никогда не будет повторно использовано (например, одноразовый ключ для входа в систему банка), и поэтому пользователю придется явно вводить данные каждый раз, вместо того чтобы иметь возможность полагаться на UA для предварительной заполнения ценность для него; или что документ предоставляет свой собственный механизм автозаполнения и не хочет, чтобы пользовательский агент предоставлял значения автозаполнения.

Итак, после того, как я испытал такое же расстройство, как и все остальные, я нашел решение, которое работает для меня. Это похоже на вены ответы autocomplete="false".

В статье Mozilla написана именно эта проблема:

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

В некоторых случаях браузер будет продолжать предлагать значения автозаполнения, даже если атрибут автозаполнения отключен. Это неожиданное поведение может быть довольно загадочным для разработчиков. Трюк, который действительно заставляет не завершать, - назначить случайную строку атрибуту

Итак, следующий код должен работать:

autocomplete="nope"

И так должно быть каждое из следующего:

autocomplete="false"
autocomplete="foo"
autocomplete="bar"

Проблема, которую я вижу, заключается в том, что агент браузера может быть достаточно умным, чтобы узнать атрибут autocomplete и применить его при следующем просмотре формы. Если это так, единственный способ, которым я могу решить проблему, - это динамически изменять значение атрибута autocomplete при создании страницы.

Следует упомянуть то, что многие браузер игнорируют настройки autocomplete для полей входа (имя пользователя и пароль). Как говорится в статье Mozilla:

По этой причине многие современные браузеры не поддерживают autocomplete = "off" для полей входа.

Если сайт задает autocomplete = "off" для формы, а форма включает поля ввода имени пользователя и пароля, браузер будет по-прежнему предлагать запомнить этот логин, и если пользователь соглашается, браузер автоматически выполнит эти поля, в следующий раз, когда пользователь посещает эту страницу.

Если сайт устанавливает autocomplete = "off" для полей ввода имени пользователя и пароля, браузер все равно будет предлагать запомнить этот логин, и если пользователь согласен, браузер автоматически выполнит эти поля при следующем посещении пользователем этой страницы.
Это поведение в Firefox (начиная с версии 38), Google Chrome (с 34) и Internet Explorer (начиная с версии 11).

Наконец, немного информации о том, принадлежит ли атрибут элементу form или элементу input. Спектр снова имеет ответ:

Если атрибут autocomplete опущен, вместо него используется значение по умолчанию, соответствующее состоянию атрибута autocomplete владельца формы элемента (либо "on", либо "off" ). Если владелец формы отсутствует, используется значение "on".

Итак. Ввод его в форму должен применяться ко всем полям ввода. Помещение его на отдельный элемент следует применять только к этому элементу (даже если его нет в форме). Если autocomplete не установлен вообще, по умолчанию он равен on.

Резюме

Чтобы отключить autocomplete на всей форме:

<form autocomplete="off" ...>

Или если вам это необходимо динамически:

<form autocomplete="random-string" ...>

Отключить autocomplete для отдельного элемента (независимо от того, какая форма установлена или нет)

<input autocomplete="off" ...>

Или если вам это необходимо динамически:

<input autocomplete="random-string" ...>

И помните, что некоторые пользовательские агенты могут переопределить даже ваши самые трудные попытки отключить autocomplete.

Ответ 8

В настоящее время решение заключается в использовании type="search". Google не применяет автозаполнение к входам с типом поиска.

Смотрите: https://twitter.com/Paul_Kinlan/status/596613148985171968

Обновление 04/04/2016: Похоже, это исправлено! См. http://codereview.chromium.org/1473733008

Ответ 9

Браузер не заботится об автозаполнении = выключен автоматически или даже заполняет учетные данные в неправильном текстовом поле?

Я установил его, установив поле пароля только для чтения и активировав его, когда пользователь нажимает на него или использует табуляцию в этом поле.

исправить автозаполнение браузера в: readonly и установить функцию writeble on focus (при щелчке мыши и перемещении по полям)

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

Обновление: Mobile Safari устанавливает курсор в поле, но не показывает виртуальную клавиатуру. Новое исправление работает, как раньше, но обрабатывает виртуальную клавиатуру:

<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/

//UpdateEnd

Кстати, больше информации о моем наблюдении:

Иногда я замечаю это странное поведение в Chrome и Safari, когда есть поля пароля в той же форме. Я думаю, браузер ищет поле пароля для вставки сохраненных учетных данных. Затем он выполняет автозаполнение имени пользователя в ближайшее текстовое поле ввода, которое появляется перед полем пароля в DOM (просто гадание из-за наблюдения). Поскольку браузер является последним экземпляром, и вы не можете его контролировать, иногда даже autocomplete = off не помешает заполнять учетные данные в неправильные поля, но не в поле пользователя или ник.

Ответ 10

Вы можете использовать autocomplete="new-password"

<input type="email" name="email">
<input type="password" name="password" autocomplete="new-password">

Работает в:

Chrome: 53, 54, 55
Firefox: 48, 49, 50

Ответ 11

всем, кто ищет решение этого, я, наконец, все понял.

Chrome только подчиняется autocomplete = "off", если страница является страницей HTML5 (я использовал XHTML).

Я преобразовал свою страницу в HTML5, и проблема исчезла (facepalm).

Ответ 12

Виден хром игнорировать autocomplete="off", я решаю его глупым способом, который использует "поддельный вход", чтобы обмануть хром, чтобы заполнить его вместо заполнения "реального".

Пример:

<input type="text" name="username" style="display:none" value="fake input" /> 
<input type="text" name="username" value="real input"/>

Chrome заполнит "поддельный вход", а при отправке сервер примет значение "реальный вход".

Ответ 13

Я отправляю этот ответ, чтобы обновить решение этой проблемы. В настоящее время я использую Chrome 49 и не отвечаю за эту работу. Я также ищу решение, работающее с другими браузерами и предыдущими версиями.

Поместите этот код в начало вашей формы

<div style="display: none;">
    <input type="text" autocomplete="new-password">
    <input type="password" autocomplete="new-password">
</div>

Затем для вашего реального поля пароля используйте

<input type="password" name="password" autocomplete="new-password">

Прокомментировать этот ответ, если он больше не работает, или если у вас возникла проблема с другим браузером или версией.

Утверждено:

Chrome: 49
Firefox: 44, 45
Край: 25
Internet Explorer: 11

Ответ 14

Autocomplete="Off" больше не работает.

Попробуйте использовать только случайную строку вместо "Off", Например, Autocomplete="NoAutocomplete"

Я надеюсь, что это помогает.

Ответ 15

До тех пор, пока только на прошлой неделе, эти два решения ниже работали для Chrome, IE и Firefox. Но с выпуском Chrome версии 48 (и все еще в 49) они больше не работают:

В верхней части формы:

<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>

В элементе ввода пароля:

автозаполнения = "выключено"

Поэтому, чтобы быстро исправить это, сначала я попытался использовать основной взлом, изначально устанавливающий входной элемент пароля для отключения, а затем использовал setTimeout в функции готовности документа, чтобы снова включить его.

setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);

Но это казалось таким сумасшедшим, и я сделал еще несколько поисков и нашел ответ @tibalts в Отключить автозаполнение Chrome. Его ответ заключается в использовании autocomplete = "new-password" в пароле ввода, и это похоже на работу во всех браузерах (я сохранил номер исправления 1 выше на этом этапе).

Вот ссылка в обсуждении разработчиков Google Chrome: https://code.google.com/p/chromium/issues/detail?id=370363#c7

Ответ 16

Вместо autocomplete = "off" используйте autocomplete = "false" ;)

from: fooobar.com/questions/2093/...

Ответ 17

autocomplete=off в основном игнорируется в современных браузерах - в основном из-за менеджеров паролей и т.д.

Вы можете попробовать добавить этот autocomplete="new-password", который не полностью поддерживается всеми браузерами, но он работает с некоторыми

Ответ 18

TL; DR: Скажите Chrome, что это новый ввод пароля, и он не будет предоставлять старые в качестве предложений автозаполнения:

<input type="password" name="password" autocomplete="new-password">

autocomplete="off" не работает из-за дизайнерского решения - многие исследования показывают, что пользователям гораздо дольше и сложнее взламывать пароли, если они могут хранить их в браузере или диспетчере паролей.

Спецификация для autocomplete изменилась, и теперь поддерживает различные значения для упрощения автоматического заполнения форм входа в систему:

<!-- Auto fills with the username for the site, even though it email format -->
<input type="email" name="email" autocomplete="username">

<!-- current-password will populate for the matched username input  -->
<input type="password" autocomplete="current-password" />

Если вы не предоставите эти данные, Chrome все равно попытается угадать, а когда он это сделает, он игнорирует autocomplete="off".

Решение состоит в том, что значения autocomplete также существуют для форм сброса пароля:

<label>Enter your old password:
    <input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
    <input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
    <input type="password" autocomplete="new-password" name="pass-repeat" />
</label>

Вы можете использовать этот флаг autocomplete="new-password" чтобы Chrome не угадывал пароль, даже если он был сохранен для этого сайта.

Chrome также может управлять паролями для сайтов напрямую, используя API учетных данных, который является стандартным и, вероятно, в конечном итоге будет иметь универсальную поддержку.

Ответ 19

Как и в случае Chrome 42, ни одно из решений/хаков в этом потоке (начиная с 2015-05-21T12:50:23+00:00) не работает для отключения автозаполнения для отдельного поля или всей формы.

РЕДАКТИРОВАТЬ: Я обнаружил, что вам действительно нужно вставить только одно фиктивное поле электронной почты в вашу форму (вы можете скрыть его с помощью display: none) перед другими полями, чтобы предотвратить автозаполнение. Я предполагаю, что хром хранит какую-то подпись формы с каждым полем автозаполнения и включает другое поле электронной почты, которое развращает эту подпись и предотвращает автозаполнение.

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

Хорошей новостью является то, что, поскольку "подпись формы" повреждена этим, ни одно из полей не автозаполняется, поэтому для очистки фальшивых полей перед отправкой не требуется JS.

Старый ответ:

Единственное, что, по моему мнению, по-прежнему жизнеспособно, - вставить два фиктивных поля типа email и password перед реальными полями. Вы можете установить их в display: none, чтобы скрыть их (это недостаточно умно, чтобы игнорировать эти поля):

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="password" name="fake_password" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

К сожалению, поля должны быть в вашей форме (в противном случае оба набора входов автозаполняются). Итак, для того, чтобы фальшивые поля были действительно проигнорированы, вам понадобится JS для запуска в форме submit, чтобы очистить их:

form.addEventListener('submit', function() {
    form.elements['fake_email'].value = '';
    form.elements['fake_password'].value = '';
});

Обратите внимание, что очистка значения с помощью Javascript позволяет переопределить автозаполнение. Поэтому, если допустимо нарушение правильного поведения с отключенным JS, вы можете упростить все это с помощью автозаполнения JS "polyfill" для Chrome:

(function(document) {

    function polyfillAutocomplete(nodes) {

        for(var i = 0, length = nodes.length; i < length; i++) {

            if(nodes[i].getAttribute('autocomplete') === 'off') {

                nodes[i].value = '';
            }
        }
    }

    setTimeout(function() {

        polyfillAutocomplete(document.getElementsByTagName('input'));
        polyfillAutocomplete(document.getElementsByTagName('textarea'));

    }, 1);

})(window.document);

Ответ 20

Я решил бесконечный бой с Google Chrome с использованием случайных символов. Когда вы всегда визуализируете автозаполнение со случайной строкой, оно никогда ничего не запомнит.

<input name="name" type="text" autocomplete="rutjfkde">

Надеюсь, что это поможет другим людям.

Ответ 21

После chrome v. 34 установка autocomplete="off" в теге <form> не работает

Я сделал изменения, чтобы избежать этого раздражающего поведения:

Удалите name и id ввода пароля
Поместите класс на вход (например: passwordInput)

(Пока Chrome не будет помещать сохраненный пароль на вход, но форма теперь сломана)

Наконец, чтобы заставить форму работать, поместите этот код в режим, когда пользователь нажимает кнопку отправки или всякий раз, когда вы хотите запустить отправку формы:

var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");

В моем случае я использовал hav id="password" name="password" для ввода пароля, поэтому я вернул их перед запуском отправки.

Ответ 22

После того, как вы попробовали все решения, вот что работает для версии chrome: 45, с формой с паролем:

 jQuery('document').ready(function(){
        //For disabling Chrome Autocomplete
        jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000));
 });

Ответ 23

Измените атрибут типа ввода на type="search".

Google не применяет автоматическое заполнение к входам с типом поиска.

Ответ 24

Я только что обновил до Chrome 49 и решение Diogo Cid больше не работает.

Я сделал другое обходное решение, скрывающее и удаляющее поля во время выполнения после загрузки страницы.

Chrome теперь игнорирует исходное обходное решение, применяя учетные данные к первому отображаемому type="password" и его предыдущему полю type="text", поэтому я скрыл оба поля, используя CSS visibility: hidden;

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

Я знаю, что это может показаться не очень элегантным, но оно работает.

Ответ 25

В Chrome 48+ используйте это решение:

Поместите поддельные поля перед реальными полями:

<form autocomplete="off">
  <input name="fake_email"    class="visually-hidden" type="text">
  <input name="fake_password" class="visually-hidden" type="password">

  <input autocomplete="off" name="email"    type="text">
  <input autocomplete="off" name="password" type="password">
</form>

Скрыть поддельные поля:

.visually-hidden {
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

Вы сделали это!

Также это будет работать для более старых версий.

Ответ 26

Я нашел это решение наиболее подходящим:

function clearChromeAutocomplete()
{
// not possible, let try: 
if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) 
{
document.getElementById('adminForm').setAttribute('autocomplete', 'off'); 
setTimeout(function () {
        document.getElementById('adminForm').setAttribute('autocomplete', 'on'); 
}, 1500);
}
}

Он должен быть загружен после того, как dom готов, или после формы.

Ответ 27

В то время как я согласен, что автозаполнение должно быть выбором пользователя, бывают случаи, когда Chrome чрезмерно усердствует (другие браузеры тоже могут быть). Например, поле пароля с другим именем по-прежнему автозаполняется с сохраненным паролем и предыдущим полем, заполненным именем пользователя. Это особенно отстой, когда форма является формой управления пользователями для веб-приложения, и вы не хотите, чтобы автозаполнение заполнило ее своими учетными данными.

Chrome полностью игнорирует autocomplete = "off". Хотя JS-хаки могут хорошо работать, я нашел простой способ, который работает на момент написания:

Задайте значение поля пароля для символа управления 8 ("\x08" в PHP или  в HTML). Это останавливает автоматическое заполнение Chrome полем, потому что оно имеет значение, но фактическое значение не вводится, потому что это символ обратного пространства.

Да, это все еще хак, но это работает для меня. YMMV.

Ответ 28

Я решил по-другому. Вы можете попробовать это.

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

Ответ 29

У меня была аналогичная проблема, когда поле ввода принимало либо имя, либо электронное письмо. Я установил autocomplete = "off", но Chrome все еще настаивал на предложениях. Оказывается, это потому, что в тексте заполнителя были слова "имя" и "электронная почта".

Например

<input type="text" placeholder="name or email" autocomplete="off" />

Я обошел его, поставив пространство с нулевой шириной на слова в заполнителе. Больше нет автозаполнения Chrome.

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />

Ответ 30

autocomplete="off" обычно работает, но не всегда. Это зависит от name поля ввода. Имена, такие как "адрес", "электронная почта", "имя" - будут заполняться автоматически (браузеры считают, что они помогают пользователям), а такие поля, как "код", "пин-код" - не будут заполняться автоматически (если установлено autocomplete="off")

Мои проблемы были - автозаполнение было возиться с помощником адреса Google

Я исправил это, переименовав это

от

<input type="text" name="address" autocomplete="off">

<input type="text" name="the_address" autocomplete="off">

Проверено в хроме 71.