Как отключить автозаполнение браузера в поле веб-формы / теге ввода?

Question

Как отключить autocomplete в основных браузерах для конкретного input (или же form field)?

Answer 1

Firefox 30 игнорирует autocomplete="off" для паролей, вместо этого выбрать пользователя, должен ли пароль храниться на клиенте. Обратите внимание на следующий комментарий от 5 мая 2014 года:

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

Согласно документации разработчика Mozilla атрибут элемента формы autocomplete предотвращает кэширование данных формы в старых браузерах.

<input type="text" name="foo" autocomplete="off" />

Answer 2

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

Когда форма отправлена, вы можете удалить эту часть перед обработкой на стороне сервера. Это помешает веб-браузеру найти контекст для вашего поля, а также поможет предотвратить атаки XSRF, поскольку злоумышленник не сможет угадать имена полей для отправки формы.

Answer 3

Большинство основных браузеров и менеджеров паролей (правильно, ИМХО) сейчас игнорируют autocomplete=off,

Зачем? Добавлено много банков и других сайтов с высоким уровнем безопасности. autocomplete=off на их страницы входа "в целях безопасности", но это фактически снижает безопасность, поскольку это заставляет людей менять пароли на этих сайтах с высоким уровнем безопасности, чтобы их было легко запомнить (и, следовательно, взломать), поскольку автозаполнение было взломано.

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

К сожалению, ошибки в реализациях автозаполнения вставляют имя пользователя и / или пароль в несоответствующие поля формы, вызывая ошибки проверки формы или, что еще хуже, случайно вставляя имена пользователей в поля, которые пользователь намеренно оставил пустыми.

Что делать веб-разработчику?

• Если вы можете сохранить все поля пароля на странице сами по себе, это хорошее начало, так как кажется, что наличие поля пароля является основным триггером для срабатывания автозаполнения пользователя / пароля. В противном случае прочитайте советы ниже.
• Safari замечает, что есть 2 поля пароля, и в этом случае отключает автозаполнение, предполагая, что это должна быть форма смены пароля, а не форма входа. Так что просто используйте два поля пароля (новый и подтвердите новый) для любых форм, где вы разрешаете

• К сожалению, Chrome 34 будет пытаться автоматически заполнять поля с помощью user/pass всякий раз, когда видит поле пароля. Это довольно плохая ошибка, которая, надеюсь, изменит поведение Safari. Однако добавление этого в верхней части формы отключает автозаполнение пароля:

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

Я еще не исследовал IE или Firefox полностью, но буду рад обновить ответ, если у других есть информация в комментариях.

Answer 4

Решением для Chrome является добавление autocomplete="new-password" на ввод пароля типа.

Пример:

<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>

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

Это хорошо работает для меня.

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

Answer 5

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

Этот обходной путь дополняет пост apinstein о поведении браузера.

Исправить автозаполнение браузера только для чтения и установить запись на фокус (нажмите и вкладка)

 <input type="password" readonly  
     onfocus="this.removeAttribute('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. Поскольку браузер является последним экземпляром, и вы не можете его контролировать,

Это исправление только для чтения сработало для меня.

Answer 6

<form name="form1" id="form1" method="post" 
      autocomplete="off" action="http://www.example.com/form.cgi">

Это будет работать в Internet Explorer и Mozilla FireFox, недостатком является то, что это не стандарт XHTML.

Answer 7

Как уже говорили другие, ответ autocomplete="off"

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

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

Особенно важно отключить его в полях для кодов безопасности кредитных карт. Как говорится на этой странице:

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

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

Answer 8

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

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

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

Answer 9

Мне пришлось бы просить не согласиться с теми ответами, которые говорят, чтобы избежать отключения автозаполнения.

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

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

Answer 10

Три варианта: Первый:

<input type='text' autocomplete='off' />

Во-вторых:

<form action='' autocomplete='off'>

В-третьих (код JavaScript):

$('input').attr('autocomplete', 'off');

Answer 11

Попробуй добавить

readonly onfocus="this.removeAttribute('readonly');"

в дополнение к

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

на вход (ы), которые вы не хотите помнить данные формы (username, passwordи т. д.), как показано ниже:

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

Обновление: ниже приведен полный пример, основанный на этом подходе, который предотвращает перетаскивание, копирование, вставку и т. Д.

<input type="text" name="UserName" style="text-transform:lowercase;" placeholder="Username" 
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" 
    oncopy="return false" ondrag="return false" ondrop="return false" 
    onpaste="return false" oncontextmenu="return false" > 

<input type="password" name="Password" placeholder="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" oncopy="return false" ondrag="return false" 
    ondrop="return false" onpaste="return false" oncontextmenu="return false" >

Протестировано на последних версиях основных браузеров, т.е. Google Chrome, Mozilla Firefox, Microsoft Edgeи т.д. и работает без проблем. Надеюсь это поможет...

Answer 12

Это работает для меня.

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

Мы также можем использовать эту стратегию в других элементах управления, таких как текст, выделение и т. Д.

Answer 13

На связанной или на самом деле, на совершенно противоположной ноте -

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

Answer 14

Просто установите autocomplete="off", Для этого есть очень веская причина: вы хотите предоставить собственную функцию автозаполнения!

Answer 15

Ни одно из решений не помогло мне в этом разговоре.

Я наконец-то понял, что решение на чистом HTML, которое не требует Javascript, работает в современных браузерах (кроме IE; нужно было хотя бы 1 перехват, верно?) И не требует отключения автозаполнения для всей формы.

Просто отключите автозаполнение на form а затем включите его для любого input Вы хотите, чтобы это работало в форме. Например:

<form autocomplete="off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

Answer 16

Мы действительно использовали идею sasb для одного сайта. Это было медицинское веб-приложение для управления кабинетом врача. Однако многие из наших клиентов были хирургами, которые использовали множество различных рабочих станций, в том числе полуобщественные терминалы. Таким образом, они хотели убедиться, что врач, который не понимает смысла автоматически сохраняемых паролей или не обращает внимания, не может случайно оставить свою регистрационную информацию легко доступной. Конечно, это было до того, как идея приватного просмотра стала появляться в IE8, FF3.1 и т. Д. Несмотря на это, многие врачи вынуждены использовать браузеры старой школы в больницах с ИТ, которые не изменятся.

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

Answer 17

Я пытался бесконечные решения, а потом я нашел это:

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

Это так просто, и это работает как шарм в Google Chrome!

Answer 18

Я думаю autocomplete=off поддерживается в HTML 5.

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

Это менее удобно для пользователей и даже не является проблемой безопасности в OS X (упомянутой Сореном ниже). Если вы беспокоитесь о том, что пароли пользователей могут быть украдены удаленно, регистратор нажатий клавиш может сделать это, даже если ваше приложение использует autcomplete=off,

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

Answer 19

Добавление autocomplete="off" не собирается сокращать это.

Изменить атрибут типа ввода на type="search",
Google не применяет автозаполнение для входов с типом поиска.

Answer 20

Лучшее решение:

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

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

Работает в:

• Хром: 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63 и 64

• Firefox: 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 и 58

Answer 21

Используйте нестандартное имя и идентификатор для полей, поэтому вместо "name" используйте "name_". Браузеры не увидят его в качестве поля имени. Самое приятное в этом то, что вы можете сделать это с некоторыми, но не со всеми полями, и он автоматически заполнит некоторые, но не все поля.

Answer 22

Немного опоздал к игре... но я только столкнулся с этой проблемой и попробовал несколько сбоев, но этот работает для меня, найденный на MDN

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

autocomplete="nope"

Answer 23

Это был нестандартный способ сделать это (я думаю, что Mozilla и Internet Explorer по-прежнему поддерживают это), но возиться с ожиданиями пользователей - плохая идея.

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

Answer 24

Добавление

autocomplete="off"

к тегу формы отключит автозаполнение браузера (что ранее было введено в это поле) из всех input поля в этой конкретной форме.

Проверено на:

• Firefox 3.5, 4 бета
• Internet Explorer 8
• Хром

Answer 25

Чтобы избежать недопустимого XHTML, вы можете установить этот атрибут, используя javascript. Пример использования jQuery:

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

Проблема в том, что пользователи без javascript получат функцию автозаполнения.

Answer 26

Итак, вот оно:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

Answer 27

Это проблема безопасности, которую браузеры игнорируют сейчас. Браузеры идентифицируют и сохраняют контент, используя входные имена, даже если разработчики считают, что информация является конфиденциальной и не должна храниться. Изменение имени входа между двумя запросами решит проблему (но все равно будет сохранено в кеше браузера, а также увеличит кэш браузера). Попросить пользователя активировать или деактивировать параметры в настройках своего браузера не является хорошим решением. Проблема может быть исправлена ​​в бэкэнде.

Вот мое исправление. Подход, который я реализовал в моей структуре. Все элементы автозаполнения генерируются со скрытым вводом, подобным этому:

<? $r = rmd5(rand().mocrotime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<? echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

Затем сервер обрабатывает переменные записи следующим образом:

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

Значение может быть доступно как обычно

var_dump($_POST['username']);

И браузер не сможет предложить информацию из предыдущего запроса или от предыдущих пользователей.

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

Answer 28

Попробуйте это тоже, если просто autocomplete="off" не работает:

autocorrect="off" autocapitalize="off" autocomplete="off"

Answer 29

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

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

Надеюсь, это кому-нибудь пригодится!

Answer 30

Things had changed now as I tried it myself old answers no longer work.

Implementation that I'm sure it will work. I test this in Chrome, Edge and Firefox and it does do the trick. You may also try this and tell us your experience.

      set the autocomplete attribute of the password input element to "new-password"

<form autocomplete="off">
....other element
<input type="password" autocomplete="new-password"/>
</form>

This is according to MDN

If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password"

This is a hint, which browsers are not required to comply with. However modern browsers have stopped autofilling <input> elements with autocomplete="new-password" for this very reason.