Chrome игнорирует автозаполнение ="выкл"

Question

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

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

Answer 1

Запретить автозаполнение имени пользователя (или адреса электронной почты) и пароля:

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

---

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

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:

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>

---

Работает в:

• Хром: 49+

• Firefox: 44+

Answer 2

ОБНОВИТЬ

Кажется, теперь 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> и дело было решено.

Обновить

Пожалуйста, посмотрите на https://github.com/terrylinooo/jquery.disableAutoFill

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

Answer 3

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

Answer 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 11 марта 2016 года. См. Последний комментарий в моем первоначально поданном отчете об ошибке, для полного объяснения. TL; DR: использовать семантические атрибуты автозаполнения, такие как autocomplete="new-street-address", чтобы Chrome не выполнял автозаполнение.

Answer 5

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

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

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

Стиль вашего ввода соответственно, чтобы он не выглядел как readonly вход

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

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

Answer 6

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's 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 учетных данных, который является стандартным и, вероятно, в конечном итоге будет иметь универсальную поддержку.

Answer 7

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

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

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

Так что в случае с 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,

Answer 8

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

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

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

Answer 9

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

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

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

Answer 10

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

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

Answer 11

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

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

Исправить автозаполнение браузера: только для чтения и установить запись в фокусе (при щелчке мышью и переходе по полям)

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

Демонстрационная версия https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

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

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

Answer 12

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

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

Работает в:

• Хром: 53, 54, 55
• Firefox: 48, 49, 50

Answer 13

[Работает в 2021 году для Chrome(v88, 89, 90), Firefox, Brave, Safari]

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

Проблема, упомянутая в вопросе, связана с функцией автозаполнения Chrome, и вот позиция Chrome по этому поводу в этой ссылке на ошибку - https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164

Проще говоря, есть два случая -

• [СЛУЧАЙ 1]: Ваш тип не похож на. В этом случае решение простое и состоит из трех шагов.

  • Добавить атрибут в
  • nameне должны начинаться со значения, такого как адрес электронной почты или имя пользователя, в противном случае Chrome все равно будет отображать раскрывающийся список. Например, name="emailToDelete" показывает раскрывающийся список, но name="to-delete-email"нет. То же самое касается атрибута.
  • Добавлять autocomplete атрибут и добавьте значимое для вас значение, например new-field-name

  Это будет выглядеть так, и вы больше не увидите автозаполнение для этого ввода до конца своей жизни -

          <input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
  

• [СЛУЧАЙ 2] : input type является password

  • Что ж, в этом случае, независимо от ваших испытаний, Chrome покажет вам раскрывающийся список для управления паролями / использования уже существующего пароля. Firefox также будет делать нечто подобное, и то же самое будет происходить со всеми другими основными браузерами. [1]
  • В этом случае, если вы действительно хотите, чтобы пользователь не видел раскрывающееся меню для управления паролями / просмотр надежно сгенерированного пароля, вам придется поиграть с JS, чтобы переключить тип ввода, как упоминалось в других ответах на этот вопрос.

[1] Подробный документ MDN по отключению автозаполнения - https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Answer 14

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

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

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

Answer 15

Я публикую этот ответ, чтобы найти обновленное решение этой проблемы. Я в настоящее время использую 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">

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

Утверждено:

• Хром: 49
• Firefox: 44, 45
• Край: 25
• Internet Explorer: 11

Answer 16

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

Пример:

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

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

Answer 17

Понятия не имею, почему это работает в моем случае, но в chrome я использовал autocomplete="none", и Chrome перестал предлагать адреса для моего текстового поля.

Answer 18

Написание ответа 2020 года на случай, если это кому-то поможет. Я пробовал много комбинаций, описанных выше, хотя в моем случае был упущен один ключ. Несмотря на то, что я сохранил autocomplete = "nope" случайную строку, это не сработало для меня, потому что у меня отсутствовал атрибут name!

поэтому я сохранил name='password' и autocomplete = "new-password"

для имени пользователя я оставил name="usrid" // НЕ СОХРАНЯЙТЕ СТРОКУ, КОТОРАЯ СОДЕРЖИТ 'user'

and autocomplete = "new-password" // То же самое для него, поэтому Google перестает предлагать пароль (выпадающее меню управления паролем)

это очень хорошо сработало для меня. (Я сделал это для веб-просмотра Android и iOS, который использует Cordova/ionic)

<ion-input [type]="passwordType" name="password" class="input-form-placeholder" formControlName="model_password"
        autocomplete="new-password" [clearInput]="showClearInputIconForPassword">
</ion-input>

Answer 19

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

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

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

от

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

в

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

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

Answer 20

Некоторые заканчивают обновление 2020 года. Пробовал все старые решения с разных сайтов. Ни один из них не работал! :-(
Тогда я нашел вот это:
Используйте

      <input type="search"/> 

и автозаполнение пропало!

Успех с Chrome 86, FireFox, Edge 87.

Answer 21

Всем, кто ищет решение этой проблемы, я наконец-то это выясню.

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

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

Answer 22

Обновление от 08/2022:

Мне удалось добиться уважения автозаполнения, включив

      autocomplete="new-password"

для каждого отдельного элемента ввода независимо от типа.

Например

      <input id="email" type="email" autocomplete="new-password"/>

Answer 23

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

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

Answer 24

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

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

Answer 25

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

      <input autocomplete="somerandomstring" or autocomplete="disabled">

Не знаю, правильно это или нет, это просто сработало для меня.

Answer 26

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

1. Следующее в верхней части формы:

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

2. Следующее в элементе ввода пароля:

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

Поэтому, чтобы быстро это исправить, сначала я попытался использовать основной метод взлома первоначальной установки элемента ввода пароля как отключенного, а затем использовал 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

Answer 27

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

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

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

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

   .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;
   }
   

3. Ты сделал это!

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

Answer 28

У меня была похожая проблема, когда в поле ввода указывалось имя или адрес электронной почты. Я установил 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" />

Answer 29

Мне удалось отключить автозаполнение, используя это правило:

Поля, которые не являются паролями, но должны быть скрыты, например номера кредитных карт, также могут иметь атрибут type="password", но должны содержать соответствующий атрибут автозаполнения, такой как "cc-number" или "cc-csc".https://www.chromium.org/developers/design-documents/create-amazing-password-forms

<input id="haxed" type="password" autocomplete="cc-number">

Однако это связано с большой ответственностью:)

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

Answer 30

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

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

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

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

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

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

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