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




работает подсказки (25)

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


Answers

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

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

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


Три варианта: сначала:

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

Во-вторых:

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

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

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

Добавление

autocomplete="off"

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

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

  • Firefox 3.5, 4 BETA
  • Internet Explorer 8
  • Хром

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

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

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

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

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

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

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

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


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

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

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

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

Итак, вот он:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}
<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">


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

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

<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" не работает, но вы можете переключиться на случайную строку, например 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 name="pass" type="password" autocomplete="new-password" />

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


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

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

autocomplete="nope"

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

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

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

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

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

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

Вы можете использовать его на входе.

Например;

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

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


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


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

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

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


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

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

Это менее удобно для пользователей и даже не проблема безопасности в OS X (упомянутый Сореном ниже). Если вас беспокоят люди, у которых их пароли украдены удаленно - регистратор нажатий клавиш все равно может сделать это, даже если ваше приложение использует autcomplete=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');" >


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

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


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

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


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

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


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

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


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

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


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

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

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

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


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

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

Надеюсь, это полезно для кого-то!


Чтобы отключить использование отключенного атрибута,

 $("#elementID").removeAttr('disabled');

и добавить использование отключенного атрибута,

$("#elementID").prop("disabled", true);

Наслаждаться :)





html browser autocomplete