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

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

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

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

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

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

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

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

Answer 4

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

Этот обходной путь является дополнением к сообщению Апинштейна о поведении браузера.

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

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

// Конец обновления

Потому что браузер автоматически вводит учетные данные в неправильное текстовое поле!?

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

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

Answer 5

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

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

Answer 6

Решение для 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 7

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

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

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

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

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

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

Answer 8

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

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

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

Answer 9

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

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

Второй:

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

Третий (код JavaScript):

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

Answer 10

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

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

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

Answer 11

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

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

Answer 12

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

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

Answer 13

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

Answer 14

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

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

Все очень просто, и в Google Chrome это прекрасно работает!

Answer 15

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

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

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

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

Answer 16

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

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

Просто отключите автозаполнение на 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 17

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

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

Answer 18

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

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

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

Answer 19

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

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

autocomplete="nope"

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.

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

Answer 21

Добавление

autocomplete="off"

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

Протестировано на:

• Firefox 3.5, 4 БЕТА
• Интернет Эксплорер 8
• Хром

Answer 22

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

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 23

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

Answer 24

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

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

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

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

Answer 25

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

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

Answer 26

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

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

Answer 27

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

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

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

Answer 28

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

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

<? $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 29

Ни один из упомянутых здесь хаков не помог мне в Chrome.Здесь обсуждается эта проблема: https://code.google.com/p/chromium/issues/detail?id=468153#c41

Добавление этого внутри <form> работает (по крайней мере на данный момент):

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

Answer 30

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

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

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