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

avatar
Brett Veenstra
5 августа 2008 в 16:22
1245866
94
3001

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

Источник
Simon_Weaver
22 ноября 2009 в 05:15
5

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

Terry Lin
25 февраля 2021 в 08:50
0

Попробуйте github.com/terrylinooo/disableautofill.js, он использует JavaScript, чтобы пропустить функцию автозаполнения из браузера.

Ответы (94)

avatar
nlucaroni
5 августа 2008 в 16:24
2771

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

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

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

<input type="text" name="foo" autocomplete="off" />
Winston Fassett
12 ноября 2008 в 04:11
50

У меня это не сработало в Firefox 3.0.3. Мне пришлось поместить атрибут автозаполнения в ФОРМУ, а не во ВХОД.

Jrgns
19 января 2009 в 08:04
20

Автозаполнение определено только в стандартах HTML 5, поэтому оно нарушит любые проверки, которые вы выполняете в отношении HTML 4. * ...

AviD
13 декабря 2010 в 12:11
106

@Winston, вы должны поместить его как в форму, так и в сам элемент ввода. Таким образом вы покроете всю нестандартность браузеров.

Jo Liss
26 февраля 2011 в 00:57
89

И не забудьте отключить расширение autocomplete = on (если вы используете Chrome), прежде чем тестировать свое веб-приложение. Иначе ты будешь чувствовать себя такой же глупой, как я. ;)

avatar
Dieter Bender
4 апреля 2022 в 15:02
0

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

$(_=>{$('form[autocomplete=off] [name]:not([readonly])').map((i,t)=>$(t).prop('autocomplete',t.type=='password'?'new-password':'nope').prop('readonly',!0).one('focus',e=>$(t).prop('readonly',!1)));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" autocomplete="off">
<input name="user" id="user" required class="form-control" />
<label class="form-label" for="user">New User</label>
<hr>
<input type="password" name="pass" id="pass" minlength="8" maxlength="20" />
<label class="form-label" for="pass">New Passwort</label>
</form>
avatar
frank edekobi
4 февраля 2022 в 03:38
0
<input autocomplete="off" aria-invalid="false" aria-haspopup="false" spellcheck="false" />

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

General Grievance
4 февраля 2022 в 14:27
0

Объяснение было бы хорошо, особенно по старым вопросам, на которые уже есть много ответов. Вам нужно установить все эти атрибуты?

General Grievance
5 февраля 2022 в 18:02
0

В порядке. Пожалуйста, отредактируйте такие детали в своем ответе.

avatar
abernee
1 декабря 2021 в 10:38
0

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

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

Что решило проблему для меня, так это изменить идентификаторы входов, чтобы они не включали эти слова. Я также должен был установить текст меток на пустую строку и используйте функцию settimeout javascript, чтобы изменить метку обратно на то, что должно быть через 0,01 с.

setTimeout(function () { document.getElementById('id_of_email_input_label').innerHTML = 'Email:'; }, 10);

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

avatar
Abdul Wadud Somrat
22 ноября 2021 в 11:56
1

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

Это можно сделать для полной формы или отдельных элементов:

  1. Добавьте autocomplete="off" к элементу, чтобы отключить автозаполнение для всей формы.
  2. Добавить autocomplete="off" для определенного элемента формы.

форма

<form action="#" method="GET" autocomplete="off">
</form>

ввод

<input type="text" name="Name" placeholder="First Name" autocomplete="off">
avatar
user1779049
15 ноября 2021 в 16:46
0

Определение атрибута ввода type="text" вместе с autocomplete="off" работает достаточно, чтобы отключить автозаполнение для меня.

ЗА ИСКЛЮЧЕНИЕМ type="password", я пытаюсь переключить атрибут readonly с помощью JavaScript, перехватывая событие onfocus/onfocusout из предложений других, работает нормально, НО, когда редактирование поля пароля начинается пустым, пароль автозаполнения появляется снова.

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

<input id="pwd1" type="text" autocomplete="off" oninput="sw(this)" readonly onfocus="a(this)" onfocusout="b(this)" />
<input id="pwd2" type="text" autocomplete="off" oninput="sw(this)" readonly onfocus="a(this)" onfocusout="b(this)" />

и JavaScript..

function sw(e) {
    e.setAttribute('type', (e.value.length > 0) ? 'password' : 'text');
}
function a(e) {
    e.removeAttribute('readonly');
}
function b(e) {
    e.setAttribute('readonly', 'readonly');
}
avatar
Alex from Jitbit
2 ноября 2021 в 23:05
1

Я веду эту нескончаемую битву уже целую вечность... И все уловки и хаки со временем перестают работать, как будто разработчики браузеров читают этот вопрос.

Я не хотел рандомизировать имена полей, трогать код на стороне сервера, использовать хитрости JS и хотел свести "хаки" к минимуму. Итак, вот что у меня получилось:

TL;DR вообще используйте input без name или id! И отслеживать изменения в скрытом поле

.
<!-- input without the "name" or "id" -->
<input type="text" oninput="this.nextElementSibling.value=this.value">
<input type="hidden" name="email" id="email">

Конечно, работает во всех основных браузерах.

P.S. Известные незначительные проблемы:

  1. вы больше не можете ссылаться на это поле с помощью id или name. Но вы можете использовать классы CSS. Или используйте $(#email').prev(); в jQuery. Или придумайте другое решение (их много).
  2. События oninput и onchange не срабатывают при программном изменении значения текстового поля. Поэтому измените свой код соответствующим образом, чтобы отразить изменения и в скрытом поле.
avatar
Shahid Malik
27 октября 2021 в 05:47
0

Очень простое решение. Просто измените имя ярлыка и имя поля, отличное от более общего имени, например: Имя, Контакт, Электронная почта. Используйте «Mail To» вместо «Email». Браузеры игнорируют автозаполнение для этих полей.

avatar
Stokely
12 октября 2021 в 22:34
-1

НЕ ИСПОЛЬЗУЙТЕ JAVASCRIPT, чтобы исправить это!!

Используйте HTML для решения этой проблемы в первую очередь, если браузеры не используют сценарии, не могут использовать вашу версию сценария или отключили сценарии. Всегда размещайте скрипт ПОСЛЕДНИМ поверх HTML.

  1. Для обычных полей формы ввода с атрибутами типа «текст» добавьте к элементу autocomplete="off". Это может не работать в современных браузерах HTML5 из-за настроек переопределения браузера пользователя, но оно заботится о многих старых браузерах и в большинстве случаев останавливает выбор автозаполнения в раскрывающемся списке. Обратите внимание, я также включил все другие параметры автозаполнения, которые могут раздражать пользователей, такие как autocapitalize="off", autocorrect="off" и spellcheck="false". Многие браузеры не поддерживают их, но добавляют дополнительные функции, которые раздражают людей, вводящих данные. Обратите внимание, что Chrome, например, игнорирует "off", если в браузерах пользователей включен autofill. Итак, настройки браузера могут переопределить этот атрибут.

    <input type="text" id="myfield" name="myfield" size="20" value="" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Введите что-нибудь здесь..." title="Введите что-нибудь" aria-label="Что-то " требуется = " требуется " ария-требуется = "истина" />

  2. Для полей username и password существует ограниченная поддержка браузером более специфических атрибутов для autocomplete, которые активируют функцию «выключено». Использование для входа в систему заставит некоторые браузеры сбросить и удалить функцию автозаполнения. autocomplete="new-password" попытается сделать то же самое для паролей, используя поле ввода типа «пароль» (см. ниже). Однако это свойственно определенным браузерам и в большинстве случаев не будет работать. Браузеры, которые не поддерживают эти функции, включают Internet Explorer 1–11, многие настольные браузеры Safari и Opera, а также некоторые версии браузеров по умолчанию для iPhone и Android. Но они предоставляют дополнительные возможности для принудительного удаления автозаполнения.

    <input type="text" id="username" name="username" size="20" value="" autocomplete="username" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Введите имя пользователя здесь..." title="Введите имя пользователя" aria-label="Имя пользователя «требуемый = «требуемый» ария-требуемый = «истинный» />

    <input type="password" id="password" name="password" size="20" minlength="8" maxlength="12" pattern="(?=.\d)(? =.[az])(?=.*[AZ]).{8,12}" value="" autocomplete="new-password" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Введите пароль..." title="Введите пароль: (8-12) ) символов, должен содержать одну цифру, одну заглавную и одну строчную букву" aria-label="Пароль" required="required" aria-required="true" />

ЛУЧШЕЕ РЕШЕНИЕ!

Из-за разрозненной поддержки HTML5 органами стандартизации и браузерами все эти функции не работают во многих современных браузерах и в большинстве старых. Поэтому некоторые дети обращаются к сценариям, чтобы заполнить пробелы. Но это ленивое программирование. Сокрытие или переписывание HTML с помощью JavaScript усугубляет ситуацию, так как теперь у вас есть слои за слоями зависимостей сценариев, ПЛЮС патчи HTML. Избегайте этого!

Лучший способ навсегда отключить эту функцию в формах и полях — просто создать пользовательское значение "id"/"name" каждый раз для элементов ввода, используя уникальное значение, например дату. или время, связанное с идентификатором поля и атрибутом имени, и убедитесь, что они совпадают (например, "имя=пароль_{дата}").

<input type="text" id="password_20211013" name="password_20211013" />

Это уничтожает глупые алгоритмы выбора автозаполнения браузера, перехватывающие совпадающие имена, которые вызывают прошлые значения для этих полей. При этом браузеры не могут сопоставить кеш предыдущих данных формы с вашими. Это отключит «автозаполнение» или покажет пустой список и больше не будет показывать предыдущие пароли! На стороне сервера вы можете создавать эти настраиваемые «именованные» поля ввода и по-прежнему можете идентифицировать и извлекать нужное поле из ответа, поступающего от браузера пользователя, просто анализируя первую часть идентификатора/имени. Например, «пароль_» или «имя пользователя_» и т. д. Когда приходит значение «имя» поля, вы просто анализируете первую часть («пароль_ {дата}») и игнорируете остальные, а затем извлекаете свое значение на сервере. Легко!

avatar
German
27 июля 2021 в 03:09
4

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

Реализация, которая, я уверен, будет работать. Я тестирую это в Chrome, Edge и Firefox, и это действительно помогает. Вы также можете попробовать это и рассказать нам о своем опыте.

set the autocomplete attribute of the password input element to "new-password"

<form autocomplete="off">
....other element
<input type="password" autocomplete="new-password"/>
</form>

Согласно MDN

Если вы определяете страницу управления пользователями, на которой пользователь может указать новый пароль для другого человека, и поэтому вы хотите предотвратить автозаполнение полей пароля, вы можете использовать autocomplete="new-password"

Это подсказка, которую браузеры не обязаны соблюдать. Однако современные браузеры прекратили автозаполнение элементов <input> с помощью autocomplete="new-password" именно по этой причине.

avatar
Rocket Fuel
19 мая 2021 в 23:50
7

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

TL;DR

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

Подробности

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

Последний параметр — это метка, прикрепленная к полю. Однако, если вы похожи на меня, вы, вероятно, захотите сохранить метку нетронутой и отображать для своих пользователей узнаваемые поля, такие как «Адрес», «Город», «Штат», «Страна». Отличные новости: вы можете! Наилучший способ добиться этого — вставить символ нулевой ширины без объединения , &#8204; в качестве второго символа в метке. Таким образом, замените <label>City</label> на <label>C&#8204;ity</label>. Это непечатаемый символ, поэтому ваши пользователи увидят City, но браузер будет обманут, заставив увидеть C ity и не распознать поле!

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

Peter Mortensen
4 октября 2021 в 12:15
0

Re "добавьте символ &#8204; в середину ваших меток": как это будет поддерживаться? Как новому разработчику обнаружить это своевременно? Как вы предлагаете документировать невидимые символы (также, если они не невидимы в некоторых контекстах)?

avatar
jemiloii
13 мая 2021 в 20:09
0

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>
avatar
Stokely
28 апреля 2021 в 22:50
1

Просто меняйте атрибут name в элементе input на нечто уникальное, и автозаполнение больше никогда не будет выполняться автоматически!

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

<input type="password" name="password_{DateTime.Now.Ticks}" value="" />

avatar
thisisashwani
9 апреля 2021 в 07:39
2

(Он будет работать в 2021 году для Chrome (v88, 89, 90), Firefox, Brave и Safari.)

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

Проблема, упомянутая в вопросе, связана с функцией автозаполнения Chrome, и вот позиция Chrome по этому поводу в этой ссылке на ошибку - Проблема 468153: autocomplete=off игнорируется для элементов INPUT без входа в систему, комментарий 160

Проще говоря, есть два случая -

  • [СЛУЧАЙ 1]: ваш тип input отличается от password. В этом случае решение простое и состоит из трех шагов.

  • Добавьте атрибут name в input

  • name не должно начинаться со значения, такого как адрес электронной почты или имя пользователя. В противном случае Chrome по-прежнему будет отображать раскрывающийся список. Например, name="emailToDelete" показывает раскрывающийся список, а name="to-delete-email" — нет. То же самое относится и к атрибуту autocomplete.

  • Добавьте атрибут autocomplete и добавьте значимое для вас значение, например new-field-name

Это будет выглядеть так, и вы не увидите автозаполнения для этого ввода до конца своей жизни -

  <input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
  • [СЛУЧАЙ 2]: input type равно password
  • Ну, в этом случае, независимо от ваших испытаний, Chrome покажет вам раскрывающийся список для управления паролями / использования уже существующего пароля. Firefox также будет делать что-то подобное, и то же самое будет со всеми другими основными браузерами. 2
  • В этом случае, если вы действительно хотите, чтобы пользователь не видел раскрывающийся список для управления паролями/видел безопасно сгенерированный пароль, вам придется поиграть с JS, чтобы переключить тип ввода, как упоминалось в других ответах этого вопрос.

2 Подробная документация MDN по отключению автозаполнения - Как отключить автозаполнение формы<139213766278812><163

AmerllicA
12 октября 2021 в 09:51
0

Благодарю за полное объяснение.

avatar
Guido
28 декабря 2020 в 22:33
1

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

Обходной путь заключается в том, чтобы установить атрибут автозаполнения как "cc-csc", значение которого является CSC кредитной карты и что им не разрешено хранить его! (пока...)

autocomplete="cc-csc"
avatar
Elazar Zadiki
15 декабря 2020 в 12:28
1

Попробовав все решения (некоторые работали частично, отключив автозаполнение, но не автозаполнение, некоторые не работали вообще), я нашел лучшее решение по состоянию на 2020 год — добавить type="search" и autocomplete="off " к вашему элементу ввода. Вот так:

<input type="search" /> or <input type="search" autocomplete="off" />

Также убедитесь, что для элемента формы установлено autocomplete="off". Это работает отлично и отключает как автозаполнение, так и автозаполнение.

Кроме того, если вы используете type="email" или любой другой текстовый тип, вам необходимо добавить autocomplete="new-email" и это полностью отключит оба варианта. то же самое касается типа = "пароль". Просто добавьте префикс «new-» в автозаполнение вместе с типом. Вот так:

<input type="email" autocomplete="new-email" />
<input type="password" autocomplete="new-password" />
avatar
A.D.P. Tondolo
24 ноября 2020 в 12:11
1
  1. Оставить поля ввода с текстовым типом и скрытыми.
  2. В DOMContentLoaded вызовите функцию, которая изменяет типы паролей и отображает поля с задержкой в ​​1 с.

document.addEventListener('DOMContentLoaded', changeInputsType);

function changeInputsType() {
    setTimeout(function() {
        $(/*selector*/).prop("type", "password").show();
    }, 1000);
}
ZF007
24 ноября 2020 в 13:13
0

Вы должны сделать лучше, чем то, что вы только что опубликовали, чтобы предотвратить голосование против или пометку ответа «низкого качества». Имейте в виду, что вы конкурируете с 82 другими ответами. Добавьте версии. Конец обзора.

avatar
FrontEndDev
30 октября 2020 в 21:49
2

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

Во-первых, если это работает для задачи, выбросьте 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;
}

Легко. У нас не было проблем с автозаполнением при использовании этого решения.

Alex from Jitbit
1 ноября 2021 в 22:57
0

Как вы мешаете пользователям нажимать «войти»?

avatar
Adam Whateverson
23 октября 2020 в 11:27
2

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

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

Введение

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

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

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

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

Например:

<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);
}

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

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

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

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

Может ли быть лучше?

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

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

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

avatar
Simmoniz
28 августа 2020 в 05:50
12

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

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

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

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

<?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'];

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

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

avatar
Shedrack
9 августа 2020 в 20:21
1
<input type="text" name="attendees" id="autocomplete-custom-append">

<script>
  /* AUTOCOMPLETE */

  function init_autocomplete() {

    if (typeof ($.fn.autocomplete) === 'undefined') {
      return;
    }
    // console.log('init_autocomplete');

    var attendees = {
      1: "Shedrack Godson",
      2: "Hellen Thobias Mgeni",
      3: "Gerald Sanga",
      4: "Tabitha Godson",
      5: "Neema Oscar Mracha"
    };

    var countriesArray = $.map(countries, function (value, key) {
      return {
        value: value,
        data: key
      };
    });

    // initialize autocomplete with custom appendTo
    $('#autocomplete-custom-append').autocomplete({
      lookup: countriesArray
    });

  };
</script>
avatar
Juergen
4 августа 2020 в 09:58
0

Это работает с 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 при автозаполнении.

avatar
Adrian P.
14 июля 2020 в 21:18
0

Я много лет боролся с автозаполнением. Я пробовал каждое предложение, и ничего не работало для меня. Добавление атрибутов 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">
avatar
Nerve
9 июля 2020 в 06:46
3

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

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

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

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

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

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

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

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

Например: логин, abc_login, пароль, некий_пароль, поле_пароля.

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

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

В таких случаях 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
avatar
prabhat.mishra2812
26 июня 2020 в 10:56
0

Только autocomplete="off" list="autocompleteOff" в вашем вводе и проделанной работе для IE/Edge! а для хрома добавьте autocomplete="new password"

avatar
Patrick
8 апреля 2020 в 15:32
2

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

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

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

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

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

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

ура

avatar
Jos
3 марта 2020 в 12:36
2

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

avatar
Nagnath Mungade
17 января 2020 в 12:59
1

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

<input type="password" autocomplete="off" name="password" id="password" />
avatar
Azaz ul Haq
11 декабря 2019 в 11:08
3

По состоянию на декабрь 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">

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

avatar
Sikandar Amla
30 ноября 2019 в 13:38
4

Я перепробовал почти все ответы, но новая версия 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");
})

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

avatar
xixe
28 ноября 2019 в 11:47
1

Мое решение с jQuery. Это может быть не на 100% надежным, но это работает для меня. Идея описана в аннотациях кода.

    /**
 * Prevent fields autofill for fields.
 * When focusing on a text field with autocomplete (with values: "off", "none", "false") we replace the value with a new and unique one (here it is - "off-forced-[TIMESTAMP]"),
 * the browser does not find this type of autocomplete in the saved values and does not offer options.
 * Then, to prevent the entered text from being saved in the browser for a our new unique autocomplete, we replace it with the one set earlier when the field loses focus or when user press Enter key.
 * @type {{init: *}}
 */
var PreventFieldsAutofill = (function () {
    function init () {
        events.onPageStart();
    }

    var events = {
        onPageStart: function () {
            $(document).on('focus', 'input[autocomplete="off"], input[autocomplete="none"], input[autocomplete="false"]', function () {
                methods.replaceAttrs($(this));
            });
            $(document).on('blur', 'input[data-prev-autocomplete]', function () {
                methods.returnAttrs($(this));
            });
            $(document).on('keydown', 'input[data-prev-autocomplete]', function (event) {
                if (event.keyCode == 13 || event.which == 13) {
                    methods.returnAttrs($(this));
                }
            });
            $(document).on('submit', 'form', function () {
                $(this).find('input[data-prev-autocomplete]').each(function () {
                    methods.returnAttrs($(this));
                });
            });
        }
    };

    var methods = {
        /**
         * Replace value of autocomplete and name attribute for unique and save the original value to new data attributes
         * @param $input
         */
        replaceAttrs: function ($input) {
            var randomString = 'off-forced-' + Date.now();
            $input.attr('data-prev-autocomplete', $input.attr('autocomplete'));
            $input.attr('autocomplete', randomString);
            if ($input.attr('name')) {
                $input.attr('data-prev-name', $input.attr('name'));
                $input.attr('name', randomString);
            }
        },
        /**
         * Restore original autocomplete and name value for prevent saving text in browser for unique value
         * @param $input
         */
        returnAttrs: function ($input) {
            $input.attr('autocomplete', $input.attr('data-prev-autocomplete'));
            $input.removeAttr('data-prev-autocomplete');
            if ($input.attr('data-prev-name')) {
                $input.attr('name', $input.attr('data-prev-name'));
                $input.removeAttr('data-prev-name');
            }
        }
    };

    return {
        init: init
    }
})();
PreventFieldsAutofill.init();
.input {
  display: block;
  width: 90%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form action="#">
  <p>
    <label for="input-1">Firts name without autocomplete</label><br />
    <input id="input-1" class="input" type="text" name="first-name" autocomplete="off" placeholder="Firts name without autocomplete" />
  </p>
  <p>
    <label for="input-2">Firts name with autocomplete</label><br />
    <input id="input-2" class="input" type="text" name="first-name" autocomplete="given-name" placeholder="Firts name with autocomplete" />
  </p>
  <p>
    <button type="submit">Submit form</button>
  </p>
</form>
avatar
azizsagi
27 сентября 2019 в 10:59
1

Самый простой ответ:

<input autocomplete="on|off">

Но имейте в виду поддержку браузера. В настоящее время атрибут автозаполнения поддерживается

.

Chrome 17.0 и более поздние версии IE 5.0 и последняя версия
Firefox 4.0 и последняя версия
Safari 5.2 и последняя версия
Opera 9.6 и последняя версия

avatar
João Victor Scanagatta
10 сентября 2019 в 13:52
2

Я столкнулся с той же проблемой, сегодня 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

avatar
Marcelo Agimóvel
1 августа 2019 в 20:09
1

Мне удалось добавить этот код после загрузки страницы:

<script>
var randomicAtomic = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  $('input[type=text]').attr('autocomplete',randomicAtomic);
</script>
mickmackusa
28 августа 2020 в 05:21
0

В этом ответе отсутствует образовательное объяснение.

avatar
Lucas
19 июля 2019 в 11:56
2

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

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

avatar
Kishan Vaghela
18 июля 2019 в 02:44
2

Легкий взлом

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

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

Удалить только для чтения после истечения времени ожидания

$(function() {
    setTimeout(function() {
        $('input[name="name"]').prop('readonly', false);
    }, 50);
});
avatar
Pasham Akhil Kumar Reddy
12 июля 2019 в 06:40
3

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

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

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

Peter Mortensen
18 июля 2021 в 17:04
0

Re "Большинство ответов не помогли, так как браузер их просто игнорировал": можно поконкретнее? Какой(ие) браузер(ы), какая(ие) версия(и) и на какой(их) платформе(ах) (включая версию(и)). Пожалуйста, ответьте, отредактировав (изменив) свой ответ, а не здесь, в комментариях (без «Редактировать:», «Обновить:» или подобное — ответ должен выглядеть так, как если бы он был написан сегодня).

avatar
ladone
19 апреля 2019 в 12:51
0

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

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

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

Peter Mortensen
18 июля 2021 в 17:08
0

Что вы подразумеваете под "как адрес электронной почты" (кажется непонятным)? Пожалуйста, ответьте, отредактировав (изменив) свой ответ, а не здесь, в комментариях (без «Редактировать:», «Обновить:» или подобное — ответ должен выглядеть так, как если бы он был написан сегодня).

avatar
Alan M.
19 февраля 2019 в 20:16
2

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

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

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

var input = "";

События поля отслеживаются jQuery...

  1. В фокусе содержимое поля и связанная с ним переменная "ввод" всегда очищаются.
  2. При нажатии клавиши любой буквенно-цифровой символ, а также некоторые определенные символы добавляются к переменной "input", а поле ввода заменяется символом маркера. Кроме того, при нажатии клавиши Enter введенные символы (хранящиеся в переменной input) отправляются на сервер через Ajax. (См. «Сведения о сервере» ниже.)
  3. При нажатии клавиши Home, End и Стрелка приводят к сбрасыванию значений переменных "input" и вводу значений переменных. (Я мог бы увлечься навигацией со стрелками и событием фокуса и использовать .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, что затем при перезагрузке приводит к тому, что страница входа в систему повторно отображается.
avatar
zapping
17 декабря 2018 в 06:39
1

Это сработало для меня как чудо.

  1. Выключите атрибут автозаполнения формы
  2. Добавьте фиктивное поле ввода и отключите его атрибут.
<form autocomplete="off">
 <input type="text" autocomplete="off" style="display:none">
</form>
avatar
JoerT
21 ноября 2018 в 23:06
3

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

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

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

avatar
step
4 августа 2018 в 14:22
40

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

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

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

Raghuram Kasyap
31 августа 2018 в 13:44
3

Это работает даже лучше. Вы можете добавить небольшой JS, который генерирует случайный код для каждой загрузки страницы, и добавить этот код в поле ввода: <code> function autoId () {var autoId = ""; var dict = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for (var i = 0; i <12; i ++) {autoId + = dict.charAt (Math.floor (Math.random () * dict.length)); } return autoId; } $ ('. autocompleteoff'). attr ('autocomplete', autoId ()); </code> Вы можете добавить класс autocompleteoff в желаемое поле ввода.

Sukanya Purushothaman
6 сентября 2018 в 05:31
0

не работает в моей версии chrome 68.0.3440.106 (официальная сборка) (64-разрядная версия)

MacK
17 октября 2018 в 11:16
0

В Chrome теперь используется стандартизированное отключение.

Nour Lababidi
4 ноября 2018 в 03:01
1

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

step
7 октября 2019 в 20:11
1

Сегодня я обнаружил, что Chrome перезаписывает случайную строку с помощью «Off». Не могу поверить, что разработчики Chrome делают этот атрибут плохим и неконтролируемым. Почему ох, мой получил.

avatar
Codemaker
9 июля 2018 в 02:16
2

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

Например:

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

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

autocapitalize="off" autocomplete="off"

или

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

avatar
NOYB
7 июля 2018 в 18:20
3

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

<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, значение атрибута автозаполнения "new-password" должно работать.

<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>
avatar
joeytwiddle
22 июня 2018 в 06:10
5

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">
avatar
gem007bd
11 мая 2018 в 13:19
3

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

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

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

avatar
user3014373
8 мая 2018 в 22:07
1

Мне удалось остановить автозаполнение Chrome 66, добавив два поддельных ввода и задав им абсолютную позицию:

<form style="position: relative">
  <div style="position: absolute; top: -999px; left: -999px;">
    <input name="username" type="text" />
    <input name="password" type="password" />
  </div>
  <input name="username" type="text" />
  <input name="password" type="password" />

Сначала я попытался добавить display:none; во входные данные, но Chrome проигнорировал их и автоматически заполнил видимые.

avatar
Julius Žaromskis
13 апреля 2018 в 06:35
6

Никаких поддельных входных данных, никакого 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

Вот как выглядит мой окончательный результат:

Password Mask

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

avatar
Edison
26 марта 2018 в 12:07
2

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

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

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

 (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" изначально

avatar
Cava
20 марта 2018 в 04:31
17

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

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

<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

Craig Jacobs
26 марта 2018 в 14:36
2

Я обнаружил, что это работает в моем предварительном тестировании. Так странно, что "выкл" не работает.

tebs1200
10 августа 2018 в 04:55
0

Это не работает для Chrome на Android. Я пробовал установить строковые значения для атрибута autocomplete, и он по-прежнему отображает предыдущие записи как предложения автозаполнения под вводом.

Cava
12 августа 2018 в 02:55
0

@ tebs1200 Какой? Поле пароля или текстовое поле?

tebs1200
18 августа 2018 в 02:57
0

@Cava извините за задержку с ответом. Текстовое поле. Неважно, какое значение я установил для autocomplete, я все равно получаю раскрывающийся список предложений на основе ранее введенных значений. Это нормально на рабочем столе, но не на Android Chrome.

avatar
Palaniichuk Dmytro
19 января 2018 в 12:57
1

Исправлено. Просто нужно добавить выше реальное поле ввода

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion - MDN https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908 - средний проверено на EDGE, Chrome (последняя версия 63), Firefox Quantum (57.0.4 64-бит), Firefox (52.2.0) поддельные поля - это обходной путь для автозаполнения Chrome / Opera, который получает неправильные поля

 const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}

 <input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />

<TextField
  name='userName'
  autoComplete='nope'
  ... 
/>

<TextField
      name='password'
      autoComplete='new-password'
      ... 
    />
avatar
hien
21 декабря 2017 в 04:33
8

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

Alex from Jitbit
1 ноября 2021 в 23:12
0

больше нет, перестал работать в последних браузерах

avatar
zinczinc
22 ноября 2017 в 08:28
1

Ни один из предоставленных ответов не работал во всех браузерах, которые я тестировал. Основываясь на уже предоставленных ответах, вот что я получил (проверено) на Chrome 61, Microsoft Edge 40 (EdgeHTML 15), IE 11<756560367> 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>
avatar
Murat Yıldız
1 ноября 2017 в 13:26
24

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

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

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

mcallahan
10 ноября 2017 в 19:16
1

Для меня в IE11 я не могу вводить текст в текстовое поле даже после того, как onfocus удаляет атрибут readonly. Однако, если я щелкну второй раз в текстовом поле, я могу печатать.

palmsey
22 февраля 2018 в 14:59
0

Я столкнулся с той же проблемой с IE11 (не могу печатать до второго фокуса). Добавление размытия и затем фокус снова работает. $(document).on('focus', 'input:password[readonly="readonly"]', function () { $(this).prop('readonly', false).blur().focus(); });

Murat Yıldız
8 ноября 2018 в 18:20
0

@ Андрей. Конечно, можно. Это основной принцип решения этой проблемы, и я также добавил обновление, содержащее полный пример кода;)

rinatdobr
21 июня 2019 в 18:21
0

Я также добавил onfocusout="this.setAttribute('readonly', 'readonly');"

avatar
Mohaimin Moin
14 марта 2017 в 09:35
5

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

avatar
Sam
12 марта 2017 в 19:17
1

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

avatar
user7237069
28 февраля 2017 в 10:25
4

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

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

  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 с razor, должен облегчить #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">
}
avatar
Muhammad Awais
30 декабря 2016 в 15:05
25

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

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

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

avatar
Geynen
24 ноября 2016 в 17:07
148

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

Jake
14 декабря 2017 в 22:04
4

Это работает в Chrome и для других типов полей, а не только для type = "password".

Crak_mboutin
15 января 2018 в 21:02
0

Я использовал его с паролями, электронной почтой и текстовыми типами, и это сработало. Я использовал это просто так: autocomplete = "new"

Denuka
31 января 2019 в 18:51
0

autocomplete = "nope" name = "pswd" и использовал <input name = "dummyPassword" type = "password" style = "display: none;"> перед полем ввода реального пароля. Это сработало для меня.

IvanRF
2 июля 2019 в 20:28
0

Примеры: chromium.org/developers/design-documents/…

Andrew Morton
7 апреля 2020 в 10:38
1

Теперь это работает почти во всех браузерах, а не только в Chrome: autocomplete # Browser_compatibility.

splashout
19 мая 2020 в 20:15
2

Это лучший ответ на данный момент. См. Дополнительную информацию в конце этой страницы: developer.mozilla.org/en-US/docs/Web/Security/…

Williaan Lopes
2 июля 2020 в 23:29
0

autocomplete="new-password" а почему параметр "выкл" не работает ?? HTML-атрибуты это действительно лажа. Это работает в браузере Opera! Спасибо.

Jatin Mandanka
8 января 2021 в 10:38
0

Работал у меня, ..

avatar
Alexander Ryan Baggett
17 ноября 2016 в 17:41
1

Что касается Internet Explorer 11, существует функция безопасности, которую можно использовать для блокировки автозаполнения.

Это работает следующим образом:

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

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

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

Jamie Rees
8 декабря 2016 в 12:12
7

Это ужасное решение, и никому не рекомендую это делать.

avatar
Dag Høidahl
24 октября 2016 в 09:16
2

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

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

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

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

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

<input type="checkbox" ng-model="createPassword">
<input ng-if="changePassword" type="password">
avatar
Oleg
2 сентября 2016 в 10:14
3

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

Я использую следующий фрагмент 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();

avatar
Master DJon
12 июля 2016 в 15:29
5

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

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

$(document).ready(function() {
    setTimeout(function() {
        var $form = $('#formId');
        $form[0].reset();
        $form.find('INPUT[type=password]').val('');
    }, 100);
});
Andrew
8 ноября 2018 в 16:27
0

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

avatar
Peter
16 июня 2016 в 10:43
5

Ответ dsuess, опубликованный с readonly, был очень умным и работал.

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

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

jQuery(document).ready(function () {
    $("input").attr('readonly', true);
    $("input").removeAttr('readonly');
});
avatar
Stav Bodik
29 мая 2016 в 19:57
13

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

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}
<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">
Andrew
8 ноября 2018 в 16:33
1

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

Hasnaa Ibraheem
21 февраля 2019 в 10:43
1

Большое спасибо, это выполнило задание +1, мой вариант вашего решения заключался в том, чтобы сделать это одной строкой: <input oninput = "this.type = 'password'" id = "inputpassword" type = "text">

Stav Bodik
21 февраля 2019 в 10:54
0

@HasnaaIbraheem Спасибо (: иногда лучше читается.

Robin Schaaf
2 марта 2021 в 20:57
0

Это единственный способ заставить его работать - атрибут только для чтения работал, но испортил порядок табуляции.

Peter Mortensen
9 апреля 2021 в 00:06
0

Объяснение было бы в порядке. Например. в чем идея / суть? На чем тестировалось (включая версии)?

avatar
Jason L.
27 апреля 2016 в 20:44
5

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

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

<!-- 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 увидел это и заставил меня на самом деле назвать ввод поддельного пароля (предоставив ему очевидный идентификатор пароля), чтобы заставить его «укусить». Я использовал класс для реализации стиля вместо использования встроенного стиля, поэтому попробуйте, если вышеописанное не работает по какой-либо причине.

avatar
Ben
23 апреля 2016 в 11:02
12

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

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>
Andrew
8 ноября 2018 в 16:54
1

Итак, если поставить это перед фактическими полями имени пользователя и пароля? браузер заполнил те, а не настоящие

avatar
AAH-Shoot
22 марта 2016 в 19:38
16

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

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

autocomplete="nope"
avatar
Debendra Dash
19 марта 2016 в 05:05
5

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

Enter image description here

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

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

  2. По коду

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

To disable in the browser, go to the setting

Go to Advanced Settings and uncheck the checkbox and then Restore.

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

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

Использование 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>
avatar
jcubic
25 февраля 2016 в 15:27
6

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

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

avatar
Blair Anderson
10 декабря 2015 в 02:21
6

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

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

Обсуждение Chrome

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

Для совместимости с Firefox используйте обычное автозаполнение='off'

<input type='search' name="whatever" autocomplete='off' />
avatar
Tamilselvan K
16 ноября 2015 в 13:02
5
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        try {
            $("input[type='text']").each(
                function(){
                   $(this).attr("autocomplete", "off");
                });
        }
        catch (e) {
        }
    });
</script>
Andrew
8 ноября 2018 в 16:29
0

Чем это отличается от настройки autocomplete=off в html, которая в наши дни не работает?

Peter Mortensen
8 апреля 2021 в 23:46
0

Объяснение было бы в порядке. Например. в чем идея/суть? На чем он был протестирован (включая информацию о версии) и при каких условиях?

avatar
Rob Zombie
1 ноября 2015 в 10:28
3

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

$(':input', $formElement).attr('autocomplete', 'off');
avatar
Matas Vaitkevicius
28 октября 2015 в 16:32
16

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

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

Roel
31 декабря 2015 в 13:24
6

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

avatar
WolfyD
13 августа 2015 в 18:22
4

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

ismxfilled="0" для OFF

или

ismxfilled="1" для ON

avatar
Jakob Løkke Madsen
2 июля 2015 в 10:40
10

Ни один из упомянутых здесь хаков не помог мне в 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>
Mikal Schacht Jensen
7 ноября 2017 в 12:30
1

Обратите внимание, что при использовании этой техники FireFox по-прежнему будет автоматически заполнять это скрытое поле, которое будет включено при отправке формы. Скорее всего, это будет плохо, так как пароль будет передаваться по потенциально незащищенному соединению. К счастью, добавление maxlength="0" не позволяет firefox автоматически заполнять поля.

avatar
Fery Kaszoni
1 мая 2015 в 05:56
22

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

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

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

azuax
14 мая 2015 в 03:31
0

Как вы сказали в хроме, значение выключения не работает. Это должно быть «ложно»

GuiGS
13 августа 2015 в 02:33
0

У меня работает на Chrome 44.0.2403.130.

Ben Affleck
1 ноября 2015 в 10:24
1

Пробовал это: $ formElement.attr ('autocomplete', 'false'); жаль не работает.

Peter Mortensen
8 апреля 2021 в 23:41
0

Но работает ли это в других браузерах?

avatar
dsuess
16 июня 2014 в 16:04
174

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

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

Jimmy Kane
10 июля 2014 в 10:56
8

Если нет javascript, вся форма не работает. -1

trnelson
27 марта 2015 в 17:58
8

@JimmyKane, ключом было бы также добавить атрибут с использованием javascript в первую очередь (что dsuess здесь не сделал, а просто добавил для полноты).

Jimmy Kane
27 марта 2015 в 20:29
0

@tmelson Я понимаю, но все же зачем использовать js для отключения? Давайте избегать js для вещей, которые можно улучшить изначально. Опять же, я согласен с вами.

avatar
apinstein
23 апреля 2014 в 04:00
256

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

wutzebaer
7 мая 2014 в 10:31
7

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

David W
1 декабря 2014 в 23:05
6

@wutzebaer, Chrome замечает скрытое поле пароля и останавливает автозаполнение. Как сообщается, это сделано для предотвращения кражи информации о пароле сайтом без ведома пользователя.

Sam Watkins
19 мая 2015 в 04:44
7

Ваш фрагмент кода предотвращает автозаполнение полей входа в систему в Chrome, Firefox, IE 8 и IE 10. Не тестировал IE 11. Хороший материал! Единственный простой ответ, который все еще работает.

avatar
lifo
15 августа 2013 в 19:02
22

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

Я наконец понял чистое 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>
avatar
yajay
19 марта 2013 в 10:05
34

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

Первый:

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

Второй:

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

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

$('input').attr('autocomplete', 'off');
rybo111
13 июня 2015 в 21:35
2

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

Ben Affleck
1 ноября 2015 в 10:23
0

Пробовал $ formElement.attr ('autocomplete', 'off'); и это не работает.

avatar
jeff
4 декабря 2012 в 18:24
11

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

autocorrect="off" autocapitalize="off" autocomplete="off"
Neil Guy Lindberg
13 августа 2020 в 17:24
0

autoComplete для React ... 0,02 доллара США

avatar
xxxxx
2 ноября 2012 в 17:00
9

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

Например;

<input type=text name="test" autocomplete="off" />
avatar
Securatek
17 сентября 2011 в 00:33
37

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

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

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

Robotronx
9 июня 2015 в 13:36
0

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

rjmunro
17 декабря 2015 в 13:48
4

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

aro_tech
21 ноября 2017 в 13:38
1

Производители браузеров, похоже, заботятся о своих интересах. Сохраненные пароли = блокировка пользователя. А включение / выключение автозаполнения было слишком простым - почему бы не использовать сложный стандарт семантических подсказок (html.spec.whatwg.org/multipage/…), который, кстати, позволяет браузеру собирать ценные семантические данные с сайтов, которые посещает каждый пользователь?

David
12 января 2018 в 18:09
0

конкретный вариант использования, который я пытаюсь решить, заключается в следующем: они уже вошли в систему. но теперь они собираются получить доступ к чему-то еще более важному. Я хочу показать диалог, который заставит их повторно пройти аутентификацию, исключив возможность того, что они пошли покурить, а плохой человек сел на их стул. попробовали несколько техник, чтобы не допустить автозаполнения, но ничего не помогло. теперь я думаю, может быть, по крайней мере, использовать старый добрый 'password = window.prompt («Пожалуйста, повторно введите свой пароль»)' плюс имя пользователя в сеансе, и попытаться аутентифицировать его.

avatar
user631300
23 февраля 2011 в 23:24
20

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

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

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

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

avatar
Hash
11 февраля 2011 в 05:14
14

Добавление

autocomplete="off"

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

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

  • Firefox 3.5, 4 БЕТА
  • Internet Explorer 8
  • Хром
avatar
cherouvim
12 декабря 2010 в 18:34
12

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

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

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

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

Andiih
16 апреля 2011 в 15:53
38

это не исключает недопустимый xhtml, он просто динамически добавляет недопустимый бит после того, как вы проверили его, он объявил его действительным!

cherouvim
22 апреля 2011 в 15:14
0

@Andiih: Так есть ли способ заставить работать автозаполнение в xhtml?

Andiih
25 апреля 2011 в 10:46
1

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

avatar
Sam Hasler
23 января 2009 в 21:21
61

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

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

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

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

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

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

Simon_Weaver
22 ноября 2009 в 05:13
7

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

rjmunro
17 декабря 2015 в 13:35
10

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

avatar
Ben Combee
20 октября 2008 в 13:36
352

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

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

enchance
13 ноября 2011 в 09:03
13

Это намного лучшее решение по сравнению с использованием autocomplete = "off". Все, что вам нужно сделать, это сгенерировать новое имя при каждой загрузке страницы и сохранить это имя в $ _SESSION для будущего использования: $_SESSION['codefield_name'] = md5(uniqid('auth', true));

amn
27 мая 2013 в 17:09
89

Нет, это не лучшее решение, потому что источником предпочтения для этого параметра является пользовательский агент, также известный как веб-браузер. Существует разница между поддержкой определенного поведения (которое пытается выполнить HTML 5) и принуждением к нему путем принятия решения от имени пользователя, что, по вашему мнению, является «гораздо лучшим решением».

macguru2000
15 мая 2014 в 21:34
18

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

xr280xr
11 февраля 2015 в 20:10
10

Что касается атак XSRF, я не уверен, какой тип атаки вы представляли, но не мог ли злоумышленник просто отрезать конечную часть так же, как вы делаете это на стороне сервера, чтобы идентифицировать поля? Или, если злоумышленник публикует поля, не могли ли они добавить свою собственную случайную строку, поскольку она будет удалена сервером?

whoadave
6 мая 2015 в 02:01
12

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

avatar
Jon Adams
16 сентября 2008 в 15:35
22

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

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

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

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

Peter Mortensen
8 апреля 2021 в 23:05
0

Здесь нет текущего пользователя с именем "sasb" (в том числе в удаленном ответе). (Хотя комментарии к некоторым удаленным ответам больше не видны.) К какому ответу (или комментарию) они относятся?

avatar
Antti Kissaniemi
8 сентября 2008 в 19:29
26

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

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

avatar
EndangeredMassa
5 августа 2008 в 16:32
24

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

avatar
brendan
5 августа 2008 в 16:27
110
<form name="form1" id="form1" method="post"
      autocomplete="off" action="http://www.example.com/form.cgi">

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

sholsinger
10 мая 2010 в 16:48
0

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

AviD
13 декабря 2010 в 12:11
16

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

SamHuckaby
21 марта 2014 в 21:18
2

К сожалению, начиная с IE 11, Microsoft больше не уважает это для input type="password". Надеюсь, ни один другой браузер не откажется от этой функции.

Andrew
9 февраля 2016 в 18:41
0

Настройка autocomplete="off" на form - единственное, что сработало для Chrome.

avatar
Teifion
5 августа 2008 в 16:27
16

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

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

ConroyP
20 октября 2008 в 09:01
0

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

Steve Perks
13 мая 2009 в 12:50
5

так что сделайте это "mysite_name". Если кто-то еще этим пользуется, я бы задавал им вопросы ...

Simon_Weaver
22 ноября 2009 в 05:11
0

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