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

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

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

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

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

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

Большинство основных браузеров и менеджеров паролей (правильно, ИМХО) теперь игнорируют 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, но буду рад обновить ответ, если у других есть информация в комментариях.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Первый:

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

Второй:

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

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

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

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

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

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

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

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

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

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

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!

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

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

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

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

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

Наконец-то я придумал решение на чистом 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 поддерживается в HTML 5.

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

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

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

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

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

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

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

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

Добавление autocomplete="off" не поможет.

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

Я только что столкнулся с этой проблемой и попробовал несколько сбоев, но этот у меня работает (находится на MDN):

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

autocomplete="nope"

Добавление

autocomplete="off"

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

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

• Firefox 3.5, 4 БЕТА
• Internet Explorer 8
• Хром

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

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

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

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

Изменение имени входа для двух запросов решит проблему (но все равно будет сохранено в кеше браузера, а также увеличит кеш браузера).

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

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

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

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

foreach ($_POST as $key => $val) {
    $newKey = preg_replace('~^__autocomplete_fix_~', '', $key, 1, $count);
    if ($count) {
        $_POST[$val] = $_POST[$newKey];
        unset($_POST[$key], $_POST[$newKey]);
    }
}

Доступ к значению можно получить как обычно

echo $_POST['username'];

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

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

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

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

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

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

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

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

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

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

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

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

Например;

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

Многие современные браузеры больше не поддерживают autocomplete = "off" для полей входа. autocomplete="new-password" вместо этого просит дополнительную информацию Документы MDN

Вот идеальное решение, которое будет работать во всех браузерах с мая 2021 года!

TL;DR

Переименуйте имена полей ввода и идентификаторы полей во что-нибудь несвязанное, например 'data_input_field_1'. Затем добавьте символ ‌ в середину ваших ярлыков. Это непечатаемый символ, поэтому вы его не увидите, но он обманом заставляет браузер не распознавать поле как поле, требующее автозаполнения, поэтому встроенный виджет автозаполнения не отображается!

Детали

Почти все браузеры используют комбинацию имени поля, идентификатора, заполнителя и метки, чтобы определить, принадлежит ли поле к группе полей адреса, для которых может быть полезно автозаполнение. Поэтому, если у вас есть поле типа <input type="text" id="address" name="street_address">, почти все браузеры будут интерпретировать это поле как поле адреса. Таким образом, браузер будет отображать встроенный виджет автозаполнения. Мечта была бы о том, чтобы использование атрибута autocomplete="off" сработало бы, к сожалению, большинство браузеров в настоящее время не подчиняются запросу.

Поэтому нам нужно использовать некоторые уловки, чтобы заставить браузеры не отображать встроенный виджет автозаполнения. Мы сделаем это, заставив браузер поверить в то, что это поле вообще не является адресным полем.

Начните с переименования атрибутов id и name во что-нибудь, что не даст вам понять, что вы имеете дело с данными, связанными с адресом. Поэтому вместо использования <input type="text" id="city-input" name="city"> используйте что-то вроде этого вместо <input type="text" id="input-field-3" name="data_input_field_3">. Браузер не знает, что представляет собой data_input_field_3. Но ты делаешь.

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

Последний параметр - это метка, прикрепленная к полю. Однако, если вы похожи на меня, вы, вероятно, захотите сохранить метку нетронутой и отображать узнаваемые поля для ваших пользователей, такие как адрес, город, штат, страна. Что ж, отличные новости: ВЫ МОЖЕТЕ! Лучший способ добиться этого - вставить несоединяемый символ нулевой ширины ‌ в качестве второго символа в метке. Итак, заменив <label>City</label> на <label>C&#8204;ity</label>. Это непечатаемый символ, поэтому ваши пользователи будут видеть City, но браузер будет обманут, увидев C ity и не узнает поле!

Миссия выполнена! Если все прошло хорошо, браузер больше не должен отображать встроенный виджет автозаполнения адреса в этих полях!

Надеюсь, это поможет вам в ваших усилиях!

Вы можете просто поместить autocomplete="off" в поля HTML, как в следующем коде.

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

Никаких фальшивых вводов, никакого javascript!

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

<style type="text/css">
    @font-face {
        font-family: 'PasswordDots';
        src: url('text-security-disc.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    input.password {
        font-family: 'PasswordDots' !important;
        font-size: 8px !important;
    }
</style>

<input class="password" type="text" spellcheck="false" />

Скачать: text-security-disc.woff

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

Chrome планирует поддержать это.

На данный момент лучшим предложением является использование типа ввода, который редко заполняется автоматически.

обсуждение Chrome

<input type='search' name="whatever" />

Чтобы быть совместимым с Firefox, используйте обычный autocomplete = 'off'

<input type='search' name="whatever" autocomplete='off' />

Вы можете отключить автозаполнение, если удалите тег form.

То же самое сделал мой банк, и мне было интересно, как они это сделали. Он даже удаляет значение, которое уже было запомнено браузером после удаления тега.

Если ваша проблема связана с автоматическим заполнением поля пароля, вы можете найти это полезным ...

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

<!-- This is a fake password input to defeat the browser's autofill behavior -->
<input type="password" id="txtPassword" style="display:none;" />
<!-- This is the real password input -->
<input type="password" id="txtThisIsTheRealPassword" />

Обратите внимание, что в Firefox и IE было достаточно просто поместить любой ввод типа пароля перед фактическим, но Chrome увидел это и заставил меня на самом деле назвать ввод поддельного пароля (дав ему очевидный идентификатор пароля), чтобы получить его "кусать". Я использовал класс для реализации стиля вместо использования встроенного стиля, поэтому попробуйте это, если по какой-то причине вышеперечисленное не работает.

Я использую этот TextMode="password" autocomplete="new-password" и при загрузке страницы в aspx txtPassword.Attributes.Add("value", '');

Google Chrome игнорирует атрибут autocomplete="off" для определенных входных данных, включая входные данные пароля и общие входные данные, определяемые по имени.

Например, если у вас есть вход с именем address, тогда Chrome будет предлагать варианты автозаполнения с адресов, введенных на других сайтах, даже если вы не укажете:

<input type="string" name="address" autocomplete="off">

Если вы не хотите, чтобы Chrome делал это, вы можете переименовать или создать пространство имен для имени поля формы:

<input type="string" name="mysite_addr" autocomplete="off">

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

<input type="string" name="mysite_addr" autocomplete="on">

Это то, что мы назвали автозаполнением текстового поля.

Мы можем отключить автозаполнение текстового поля двумя способами:

1. По ярлыку браузера

2. По коду

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

Перейдите в Дополнительные настройки и снимите флажок, а затем - Восстановить.

Если вы хотите отключить метку кодирования, вы можете сделать следующее:

Использование AutoCompleteType="Disabled":

<asp:TextBox runat="server" ID="txt_userid" AutoCompleteType="Disabled"></asp:TextBox>

Установив форму autocomplete="off":

<asp:TextBox runat="server" ID="txt_userid" autocomplete="off"></asp:TextBox>

Установив форму autocomplete="off":

<form id="form1" runat="server" autocomplete="off">
    // Your content
</form>

Используя код на странице .cs:

protected void Page_Load(object sender, EventArgs e)
{
    if(!Page.IsPostBack)
    {
        txt_userid.Attributes.Add("autocomplete", "off");
    }
}

Используя jQuery

<head runat="server">
    <title></title>

    <script src="Scripts/jquery-1.6.4.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#txt_userid').attr('autocomplete', 'off');
        });
    </script>

Ответ <сильный > dsuess, размещенный только для чтения, был очень умен и работал.

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

Итак, у меня возникла идея реализовать это в решении jQuery:

jQuery(document).ready(function () {
    $("input").attr('readonly', true);
    $("input").removeAttr('readonly');
});

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

Уловка: использование таймера для сброса формы и установки пустых полей пароля. Продолжительность 100 мс кажется минимальной для работы.

$(document).ready(function() {
    setTimeout(function() {
        var $form = $('#formId');
        $form[0].reset();
        $form.find('INPUT[type=password]').val('');
    }, 100);
});

Кажется, что этого невозможно достичь без использования комбинации клиентского и серверного кода.

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

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

2. Поместите три экземпляра каждого поля формы в форму и скройте первое и последнее поля каждого набора с помощью CSS, а затем отключите их после загрузки страницы с помощью javascript. Это сделано для того, чтобы браузер не заполнял поля автоматически.

Вот скрипт, демонстрирующий javascript, css и html, как описано в # 2 https://jsfiddle.net/xnbxbpv4/

javascript:

$(document).ready(function() {
    $(".disable-input").attr("disabled", "disabled");
});

css:

.disable-input {
  display: none;
}

html:

<form>
<input type="email" name="username" placeholder="username" class="disable-input">
<input type="email" name="username" placeholder="username">
<input type="email" name="username" placeholder="username" class="disable-input">
<br>
<input type="password" name="password" placeholder="password" class="disable-input">
<input type="password" name="password" placeholder="password">
<input type="password" name="password" placeholder="password" class="disable-input">
<br>
<input type="submit" value="submit">
</form>

Вот примерный пример того, что код сервера, использующий asp.net с бритвой, должен облегчить # 1

модель:

public class FormModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

контроллер:

public class FormController : Controller
{
    public ActionResult Form()
    {
        var m = new FormModel();

        m.Username = "F" + Guid.NewGuid().ToString();
        m.Password = "F" + Guid.NewGuid().ToString();

        return View(m);
    }

    public ActionResult Form(FormModel m)
    {
        var u = Request.Form[m.Username];
        var p = Request.Form[m.Password];

        // todo: do something with the form values

        ...

        return View(m);
    }
}

Посмотреть:

@model FormModel

@using (Html.BeginForm("Form", "Form"))
{
    @Html.HiddenFor(m => m.UserName)
    @Html.HiddenFor(m => m.Password)

    <input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <input type="email" name="@Model.Username" placeholder="username">
    <input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <br>
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <input type="password" name="@Model.Password" placeholder="password">
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <br>
    <input type="submit" value="submit">
}

Может быть важно знать, что Firefox (я думаю, только Firefox) использует значение с именем ismxfilled, которое в основном вызывает автозаполнение.

ismxfilled="0" для OFF

or

ismxfilled="1" для ON

Я перепробовал почти все ответы, но новая версия Chrome умна; если вы напишете

autocomplete="randomstring" or autocomplete="rutjfkde"

он автоматически преобразует его в

autocomplete="off"

когда элемент управления вводом получает фокус.

Итак, я сделал это с помощью jQuery, и мое решение таково.

$("input[type=text], input[type=number], input[type=email], input[type=password]").focus(function (e) {
    $(this).attr("autocomplete", "new-password");
})

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

Попробуй это :

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

Чтобы решить эту проблему, я использовал некоторые приемы CSS, и у меня работает следующее.

input {
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
}

Прочтите эту статью. для более подробной информации.

Чтобы предотвратить автоматическое заполнение браузера сохраненными учетными данными пользователя для входа на сайт, поместите поле ввода текста и пароля вверху формы с непустыми значениями и стилем "position: absolute; top: -999px; left: -999px", чтобы скрыть поля.

<form>
  <input type="text" name="username_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
  <input type="password" name="password_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
  <!-- Place the form elements below here. -->
</form>

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

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

Важно, чтобы эти два поля располагались перед полями "настоящего" типа пароля в форме.

Для новых браузеров, совместимых с html 5.3, должно работать значение атрибута автозаполнения «новый пароль».

<form>
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" autocomplete="new-password" />
</form>

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

<form>
  <div style="display:none">
    <input type="text" readonly tabindex="-1" />
    <input type="password" readonly tabindex="-1" />
  </div>
  <!-- Place the form elements below here. -->
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" autocomplete="new-password" />
</form>

Если вы хотите предотвратить автоматическое заполнение поля общим подключаемым модулем браузера LastPass, вы можете добавить атрибут data-lpignore="true", добавленный к другим предложениям в этом потоке. Обратите внимание, что это относится не только к полям пароля.

<input type="text" autocomplete="false" data-lpignore="true" />

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

Большинство ответов не помогли, поскольку браузер их просто игнорировал. (Некоторые из них не были кроссбраузерными). Исправление, которое сработало для меня:

<form autocomplete="off">
    <input type="text" autocomplete="new-password" />
    <input type="password" autocomplete="new-password" />
</form>

Я установил autofill = "off" в теге формы и autofill = "new-password" везде, где автозаполнение не было необходимо.

По состоянию на декабрь 2019 г .:

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

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

Согласно сообщению Mozilla Dev Network (MDN) о как отключить автозаполнение форм

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

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

Решение

Итак, в конце статьи они поделились решением, которое работает для всех браузеров, включая IE11 + Edge. По сути, это плагин jQuery, который делает свое дело. Вот ссылка на плагин jQuery и как он работает.

Фрагмент кода:

$(document).ready(function () {        
    $('#frmLogin').disableAutoFill({
        passwordField: '.password'
    });
});

Обратите внимание на то, что в HTML поле пароля имеет текстовый тип, и для идентификации этого поля применяется класс password:

<input id="Password" name="Password" type="text" class="form-control password">

Надеюсь, это кому-то поможет.

Есть много ответов, но большинство из них - это хаки или какие-то обходные пути.

Здесь есть три случая.

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

Если вы все же хотите это сделать, см. Случай III.

Случай II: Когда это не ваша обычная форма входа, но атрибут name или id входных данных не такой, как адрес электронной почты, логин, имя пользователя, имя_пользователя, пароль.

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

<input type="text" name="yoda" autocomplete="off">

Случай III. Когда это не обычная форма входа, а атрибут name или id входных данных, например адрес электронной почты, логин, имя пользователя, имя_пользователя, пароль.

Например: логин, abc_login, пароль, some_password, password_field.

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

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

В таких случаях autocomplete="off" работать не будет. Используйте autocomplete="new-password"

<input type="text" name="yoda" autocomplete="new-password">

Полезная ссылка:

1. https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

В Chrome для ввода типа пароля у меня работает только autocomplete="new-password".

Safari не изменит своего мнения об автозаполнении, если вы установите autocomplete="off" динамически из JavaScript. Тем не менее, было бы уважением, если бы вы делали это для каждого поля.

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

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

Я использую следующий фрагмент jQuery:

// Prevent input autocomplete
$.fn.preventAutocomplete = function() {
    this.each(function () {
        var $el = $(this);
        $el
            .clone(false, false) // Make a copy (except events)
            .insertBefore($el)   // Place it before original field
            .prop('id', '')      // Prevent ID duplicates
            .hide()              // Make it invisible for user
        ;
    });
};

А потом просто $('#login-form input').preventAutocomplete();

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

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

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

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

Псевдо-реализация для AngularJS:

<input type="checkbox" ng-model="createPassword">
<input ng-if="changePassword" type="password">

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

Например:

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

если приведенный выше код не работает, попробуйте также добавить эти атрибуты

autocapitalize="off" autocomplete="off"

or

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

Я столкнулся с той же проблемой, сегодня, 10.09.2019, я нашел только одно решение:

Добавьте autocomplete = "off" в тег формы.

поставить 1 ложный ввод после открытия тега формы.

<input id="username" style="display:none" type="text" name="fakeusernameremembered">

но он не будет работать с полем типа пароля, попробуйте

<input type="text" oninput="turnOnPasswordStyle()" placeholder="Enter Password" name="password" id="password" required>

по сценарию

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

Это проверено на Chrome-78, IE-44, Firefox-69.

Ни одно из решений, которые я нашел на сегодняшний день, не дает реального рабочего отклика.

Решения с атрибутом autocomplete не работают.

Итак, вот что я написал для себя:

<input type="text" name="UserName" onkeyup="if (this.value.length > 0) this.setAttribute('type', 'password'); else this.setAttribute('type', 'text');" >

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

И это работает.

ваше здоровье

Мое решение - изменить тип текстовых входов динамически с помощью директивы angular js, и это работает как шарм

сначала добавьте 2 скрытых текстовых поля

и просто добавьте такую ​​директиву angular

 (function () {

    'use strict';

    appname.directive('changePasswordType', directive);

    directive.$inject = ['$timeout', '$rootScope',  '$cookies'];

    function directive($timeout,  $rootScope, $cookies) {
        var directive = {
            link: link,
            restrict: 'A'
        };

        return directive;

        function link(scope,element) {
            var process = function () {
                var elem =element[0];
                elem.value.length > 0 ? element[0].setAttribute("type", "password") :
                element[0].setAttribute("type", "text");
            }

            element.bind('input', function () {
                process();
            });

            element.bind('keyup', function () {
                process();
            });
        }
    }
})()

затем используйте его в текстовом поле, где вам нужно предотвратить автозаполнение

    <input type="text" style="display:none">\\can avoid this 2 lines
    <input type="password" style="display:none">
    <input type="text"  autocomplete="new-password" change-password-type>

NB: не забудьте включить jquery и изначально установить type ="text"

Уверен, что это наиболее универсальное решение на сегодняшний день

Это останавливает автозаполнение и всплывающее окно с предложениями.

Введение

Посмотрим правде в глаза, autocomplete = off или new-password, похоже, не работает. Это должно работать, но это не так, и каждую неделю мы обнаруживаем, что что-то еще изменилось, и браузер заполняет форму новым случайным мусором, который нам не нужен. Я обнаружил действительно простое решение, которое не требует автозаполнения на страницах входа.

Как реализовать

Шаг 1). Добавьте один и тот же вызов функции в атрибуты onmousedown и onkeyup для полей имени пользователя и пароля, убедившись, что вы указали им идентификатор И обратите внимание на код в конце вызова функции. md = mousedown и ku = keyup

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

Например:

<input type="text" value="&nbsp;" id="myusername" onmousedown="protectMe(this,'md')" onkeyup="protectMe(this,'ku')" />

Шаг 2). Включите эту функцию на странице

function protectMe(el,action){

 // Remove the white space we injected on startup
 var v = el.value.trim();
 
// Ignore this reset process if we are typing content in
// and only acknowledge a keypress when it's the last Delete
// we do resulting in the form value being empty
 if(action=='ku' && v != ''){return;} 

// Fix double quote issue (in the form input) that results from writing the outerHTML back to itself
  v = v.replace(/"/g,'\\"'); 
  
  // Reset the popup appearing when the form came into focus from a click  by rewriting it back
  el.outerHTML=el.outerHTML; 

  // Issue instruction to refocus it again, insert the value that existed before we reset it and then select the content.
  setTimeout("var d=document.getElementById('"+el.id+"'); d.value=\""+v+"\";d.focus();if(d.value.length>1){d.select();}",100);
}

Что он делает?

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

Какие проблемы?

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

Что может быть лучше?

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

Протестированные браузеры

Протестировано и работает с последними версиями Chrome, Firefox, Edge на момент публикации.

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

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

Затем вы захотите сохранить любые длинные записи в одной строке, например input, и вы захотите, чтобы textarea прокручивалась по оси Y вместе с курсором. Мы также хотим избавиться от поля изменения размера, поскольку мы делаем все возможное, чтобы имитировать поведение input, у которого нет дескриптора изменения размера. Мы достигаем всего этого с помощью небольшого быстрого CSS:

#your-textarea {
  resize: none;
  overflow-y: hidden;
  white-space: nowrap;
}

Наконец, вы захотите убедиться, что надоедливая полоса прокрутки не появляется, чтобы разрушить вечеринку (для этих особенно длинных записей), поэтому убедитесь, что ваша текстовая область не показывает ее:

#your-textarea::-webkit-scrollbar {
  display: none;
}

Очень просто. У нас не было проблем с автозаполнением с этим решением.

Функция автозаполнения изменяет значение, не выбирая поле. Мы могли бы использовать это в нашем управлении состоянием, чтобы игнорировать изменения состояния перед событием select.

Пример в React:

import React, {Component} from 'react';

class NoAutoFillInput extends Component{

    constructor() {
        super();
        this.state = {
            locked: true
        }
    }

    onChange(event){
        if (!this.state.locked){
            this.props.onChange(event.target.value);
        }
    }

    render() {
        let props = {...this.props, ...{onChange: this.onChange.bind(this)}, ...{onSelect: () => this.setState({locked: false})}};
        return <input {...props}/>;
    }
}

export default NoAutoFillInput;

Если браузер пытается заполнить поле, элемент по-прежнему заблокирован, и его состояние не изменяется. Теперь вы можете просто заменить поле ввода компонентом NoAutoFillInput, чтобы предотвратить автозаполнение:

<div className="form-group row">
    <div className="col-sm-2">
        <NoAutoFillInput type="text" name="myUserName" className="form-control" placeholder="Username" value={this.state.userName} onChange={value => this.setState({userName: value})}/>
    </div>
    <div className="col-sm-2">
        <NoAutoFillInput type="password" name="myPassword" className="form-control" placeholder="Password" value={this.state.password} onChange={value => this.setState({password: value})}/>
    </div>
</div>

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

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

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

Easy Hack

Сделать ввод доступным только для чтения

<input type="text" name="name" readonly="readonly">

Удалить только чтение после тайм-аута

$(function() {
    setTimeout(function() {
        $('input[name="name"]').prop('readonly', false);
    }, 50);
});

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

<input id='input_password' type='text' autocomplete='off' autofocus>

Есть переменная с именем input, заданная как пустая строка ...

var input = "";

За полевыми событиями следит jQuery ...

1. В фокусе содержимое поля и соответствующая входная переменная всегда очищаются.
2. При нажатии клавиши любой буквенно-цифровой символ, а также некоторые определенные символы добавляются к входной переменной, а поле ввода заменяется символом маркера. Кроме того, при нажатии клавиши Enter набранные символы (сохраненные во входной переменной) отправляются на сервер через Ajax. (См. Сведения о сервере ниже.)
3. При нажатии клавиши Home, End и Arrow вызывают сброс входной переменной и значений полей. (Я мог бы поработать со стрелками и событием фокуса и использовать .selectionStart, чтобы выяснить, где пользователь щелкнул или выполнял навигацию, но это не стоит усилий для поля пароля.) Кроме того, нажатие клавиши Backspace соответственно обрезает и переменную, и содержимое поля.

$("#input_password").off().on("focus", function(event) {
    $(this).val("");
    input = "";

}).on("keypress", function(event) {
    event.preventDefault();

    if (event.key !== "Enter" && event.key.match(/^[0-9a-z!@#\$%&*-_]/)) {
        $(this).val( $(this).val() + "•" );
        input += event.key;
    }
    else if (event.key == "Enter") {
        var params = {};
        params.password = input;

        $.post(SERVER_URL, params, function(data, status, ajax) {
            location.reload();
        });
    }

}).on("keyup", function(event) {
    var navigationKeys = ["Home", "End", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
    if ($.inArray(event.key, navigationKeys) > -1) {
        event.preventDefault();
        $(this).val("");
        input = "";
    }
    else if (event.key == "Backspace") {
        var length = $(this).val().length - 1 > 0 ? $(this).val().length : 0;
        input = input.substring(0, length);
    }
});

Сводка внешнего интерфейса

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

Сведения о сервере (необязательно)

Как показано выше, JavaScript выполняет location.reload (), как только сервер возвращает ответ JSON. (Этот метод входа в систему предназначен для доступа к ограниченному инструменту администрирования. Некоторые излишки, связанные с содержимым файлов cookie, могут быть пропущены для более общей реализации.) Вот подробности:

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

autocomplete = 'off' не сработал для меня, в любом случае я установил атрибут value поля ввода на пробел, то есть <input type='text' name='username' value=" ">, который установил символ ввода по умолчанию на пробел, и поскольку имя пользователя было пустым, пароль также был очищен.

Ни один из представленных ответов не работал во всех протестированных мной браузерах. Основываясь на уже предоставленных ответах, это то, к чему я пришел (тестировал) в Chrome 61, Microsoft Edge 40 (EdgeHTML 15), IE 11 , Firefox 57, Opera 49 и Safari 5.1. Это странно в результате многих испытаний; однако это работает для меня.

<form autocomplete="off">
    ...
    <input type="password" readonly autocomplete="off" id="Password" name="Password" onblur="this.setAttribute('readonly');" onfocus="this.removeAttribute('readonly');" onfocusin="this.removeAttribute('readonly');" onfocusout="this.setAttribute('readonly');" />
    ...
</form> 

<script type="text/javascript">
    $(function () {           
        $('input#Password').val('');
        $('input#Password').on('focus', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
    $('input#Password').on('keyup', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
    $('input#Password').on('keydown', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
</script>