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

Как отключить автозаполнение в основных браузерах для определенного ввода (или поля формы)?

Ответов (25)

Решение

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

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

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

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

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

Три варианта:

Первый:

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

Второй:

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

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

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

В этом разговоре у меня не сработало ни одно решение.

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

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

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

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

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

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

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

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

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

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

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

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

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

В добавление к

autocomplete="off"

Использовать

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

Надеюсь это поможет.

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

Вместо того, чтобы autocomplete="off" просто использовать autocomplete="false"

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

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

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

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

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

<form id="something-form">
  <input style="display: none" name="email" value="randomgeneratevalue"></input>
  <input type="password">
</form>

Если вы используете этот метод, Google Chrome не сможет вставить пароль для автозаполнения.

Я много лет боролся с автозаполнением. Я пробовал каждое предложение, и ничего не помогло. Добавление атрибутов jQuery 2 сработало хорошо:

$(document).ready( function () {
    setTimeout(function() {
        $('input').attr('autocomplete', 'off').attr('autocorrect', 'off');
    }, 10);
}); 

приведет к HTML

<input id="start_date" name="start_date" type="text" value="" class="input-small hasDatepicker" autocomplete="off" placeholder="Start date" autocorrect="off">

Просто autocomplete="off" list="autocompleteOff" ваш вклад и работа для IE / Edge! а для хрома добавить autocomplete="new password"

Работает с Chrome 84.0.4147.105

1. Назначьте текстовый тип полям пароля и добавьте класс, например "fakepasswordtype".

<input type="text" class="fakepasswordtype" name="password1">
<input type="text" class="fakepasswordtype" name="password2">

2. Затем используйте jQuery, чтобы снова изменить тип на пароль в тот момент, когда будет сделан первый ввод.

jQuery(document).ready(function($) {
    $('.fakepasswordtype').on('input', function(e){
        $(this).prop('type', 'password');
    });
});

Это остановило Chrome от его неприятного уродливого поведения при автозаполнении.

У меня это работает.

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

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

Chrome продолжает попытки принудительного автозаполнения. Итак, вам нужно сделать несколько вещей.

Атрибуты поля ввода в id и name необходимость не быть узнаваемыми. Поэтому никаких значений, таких как имя, телефон, адрес и т. Д.

Смежная метка или div также не должна быть узнаваемой. Однако вы можете задаться вопросом, как пользователь узнает? Что ж, есть небольшой забавный трюк, который вы можете сделать с ::after помощью content . Вы можете установить его на букву.

<label>Ph<span class='o'></span>ne</label>
<input id='phnbr' name='phnbr' type='text'>

<style>
  span.o {
    content: 'o';
  }
</style>

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

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

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

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

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

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

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

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

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

Мы действительно использовали идею sasb для одного сайта.

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

Конечно, это было до идеи приватного просмотра, которая стала реализовываться в Internet Explorer 8, Firefox 3.1 и т. Д. Даже в этом случае многие врачи вынуждены использовать старые школьные браузеры в больницах с ИТ, которые не изменятся.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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