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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Решение для 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 всегда автоматически заполняет данные, если он находит поле типа password, достаточно просто указать для этого поля autocomplete = "new-password" .

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

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

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

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

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

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

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

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

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

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

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

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

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

Второй:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

autocomplete="nope"

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

Запретить автозаполнение имени пользователя (или email) и пароля:

<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

Добавление

autocomplete="off"

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

Испытано на:

• Firefox 3.5, 4 BETA
• Интернет Explorer 8
• Хром

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

только для чтения onfocus="this.removeAttribute('readonly' );"

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

автозаполнение="off"

к входным данным, которые вы не хотите запоминать, формируют данные (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');" >

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

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

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

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

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

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

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

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

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