Отключить автозаполнение через CSS
Можно ли использовать CSS для отключения автозаполнения элемента формы (в частности, текстового поля)? Я использую библиотеку тегов, которая не допускает элемент автозаполнения, и я хотел бы отключить автозаполнение без использования Javascript.
David 02 фев. 2010, в 19:23
Поделиться
Поделиться:
7 ответов
Лучший ответ
Вы можете использовать сгенерированные id и name каждый раз, что отличается, поэтому браузер не может запомнить это текстовое поле и не сможет предложить некоторые значения. Это, по крайней мере, альтернатива перекрестного браузера, но я бы рекомендовал пойти с ответа от RobertsonM ( autocomplete=»off» ).
codevour 02 фев. 2010, в 19:17
Поделиться
Побочным эффектом этого является то, что история браузера загромождается множеством различных (случайных) полей формы. Каждый поиск известных значений в локальных базах данных браузера займет некоторое время.
dermatthias 27 май 2011, в 05:25
Хорошая идея, но она не препятствует сохранению номеров кредитных карт в незашифрованной базе данных автозаполнения.
Hans-Peter Störr 25 июнь 2012, в 14:03
Если вы не используете статические управляющие имена / идентификаторы, тогда любой сценарий будет нарушен, и любой сбор данных формы также прекратится (если каждый аспект вашего приложения не знает о новом соглашении об именах и динамически обновляет любой сценарий / сбор данных, а также ).
Gary Richter 08 апр. 2015, в 13:50
Если вы должны избегать автозаполнения, «случайный выбор» имен полей — единственный реальный путь. Использование любых подсказок, таких как autocomplete=»off» , будет игнорироваться в версии Browser X (текущая + 1). (Например, последняя версия Google Chrome игнорирует autocomplete = off.)
Mikko Rantalainen 09 янв. 2017, в 11:36
@kmoser: Даже если вы отключите функцию автозаполнения браузера путем рандомизации id элемента, он все равно сохранит его в кеше (то есть на жестком диске пользователя). Что ужасно делать с чьим-либо номером кредитной карты или любой другой конфиденциальной информацией. Кроме того, это излишне загромождает дисководы вашего пользователя. Каждый раз, когда они посещают вашу страницу, новый (подобный cookie) файл будет сохранен на их компьютере. Просто, черт возьми, попробуйте очистить кэш Chrome и посмотреть, сколько места он освободит (если вы этого не делали какое-то время). Вот почему я называю это ужасной идеей.
c00000fd 04 июль 2017, в 22:49
@c00000fd c00000fd Спасибо за объяснение. Я согласен с тем, что сохранение чьего-либо номера кредитной карты — это плохо, но беспорядок на жестких дисках в данном случае не является проблемой, поскольку ваш браузер хранит в своем кэше другие файлы (страницы, изображения и т. Д.), Которые занимают на порядок больше данных. Более того, все браузеры дают вам возможность ограничить размер кэша.
Отключение стилей автозаполнения
При авто-заполнении инпутов, Chrome выставляет следующие стили для авто-заполненных полей. Как эти стили перекрыть или отключить? Именно стили, а не само по себе автозаполение. 
И следующий код не отключает стили автозаполнения:
input:-webkit-autofill
Отслеживать
задан 17 мая 2016 в 23:26
JamesJGoodwin JamesJGoodwin
3,968 6 6 золотых знаков 39 39 серебряных знаков 73 73 бронзовых знака
Вы не должны этого хотеть
18 мая 2016 в 4:26
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Вот что говорит MDN про :-webkit-autofill:
Note: The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.
Cтили, добавляемые многими браузерами через user agent, содержат !important в объявлении свойства :-webkit-autofill , запрещая его перезапись без вмешательства хаков Javascript
Можно выкрутиться, применив хитрости:
1) в случае, если фон input должен быть какого-либо цвета, но не прозрачный:
input:-webkit-autofill < -webkit-box-shadow:0 0 0 50px white inset; /* можно изменить на любой вариант цвета */ -webkit-text-fill-color: #333; >в этом случае мы заливаем содержимое input применением внутренней тени желаемого цвета поверх цвета фона, устанавливаемого user agent stylesheet в Chrome
2) можно установить задержку на анимацию «пожелтения» фона на большой промежуток времени, тем самым давая возможность пользователю ввести свои данные и не увидеть желтый фон достаточно долго:
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active < transition: background-color 5000s ease-in-out 0s; /* выставляется желаемая задержка */ >CSS :autofill селектор
Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.
Вступление
Псевдокласс :auto-fill в CSS позволяет нам стилизовать элементы , которые содержат контент, автоматически заполняемый браузером.
В качестве примера возьмем форму регистрации нового пользователя. Вы когда-нибудь нажимали на поле ввода и видели раскрывающийся список предложений для вставки?
Заметили, что автозаполненные поля имеют желтый фон? Вот как браузер стилизует поле, когда оно содержит автоматически заполняемый контент. :auto-fill позволяет нам переопределить или расширить это с помощью наших собственных стилей.
input:auto-fill < outline: 5px solid rgb(0 0 0 / .5); >Когда происходит автозаполнение?
Это немного сложный вопрос, потому что у каждого браузера есть свои настройки, которые позволяют пользователю включать или отключать автозаполнение.
Таким образом, вы устанавливаете стили автозаполнения для ввода с помощью :auto-fill, но это не означает, что это действительно произойдет. Пользователь должен включить автозаполнение в настройках браузера, чтобы функция работала и применялись стили.
Автозаполнение может произойти, когда атрибут автозаполнения применяется к инпуту формы:
Но атрибут является скорее советом, чем жестким правилом, потому что нет возможности переопределить настройку браузера автозаполнения непосредственно в CSS, если она отключена. HTML Living Standard, кажется, поддерживает это в примечании:
Одним из способов автозаполнения может быть использование атрибута autocomplete, но браузеры могут выполнять автозаполнение даже без этого атрибута.
И в большинстве случаев так оно и есть — по крайней мере, в нашем тестировании.
Переопределение: стили автозаполнения
Браузеры часто используют собственные стили. Мы называем эти стили пользовательского агента (UA), и они являются причиной того, что у нас есть такие вещи, как сброс CSS, чтобы переопределить их для согласованных исходных стилей кросс-браузера.
Ранее мы видели, что Chrome применяет светло-желтый фоновый цвет к автозаполненному контенту. Стили UA Chrome включают:
input:-internal-autofill-selected
Согласно MDN, переопределить эти стили — это то, что мы не можем сделать в CSS, но этот фрагмент от Джеффа, кажется, делает свое дело, используя вставку box-shadow для изменения цвета фона при использовании -webkit-text-fill-color для изменить цвет текста:
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus
Демо
Вот простая форма регистрации, которая принимает несколько входных данных. Обратите внимание, что при автоматическом заполнении информации для свойства схемы запускается анимация. Но, эй, убедитесь, что у вас включено автозаполнение в настройках вашего браузера, чтобы оно работало. Даже в этом случае браузеру может потребоваться захватить и сохранить информацию для полей, прежде чем он сможет делать предложения.
How to turn off form autocompletion
В этой статье объясняется как можно отключить автозаполнение полей на сайте.
Эти функции обычно включены по умолчанию, но они могут вызвать проблемы конфиденциальности пользователей, поэтому браузеры могут позволить отключать их. Однако некоторые данные, представленные в формах, либо не будут полезны в будущем (например, одноразовый пин-код), либо содержат конфиденциальную информацию (например, уникальный правительственный идентификатор или код безопасности кредитной карты). Как автор сайта, вы можете предпочесть, чтобы браузер не запоминал значения для таких полей, даже если в браузере включена функция автозаполнения.
It is important to know that if you turn off autocomplete, you are breaking the rule 1.3.5: Identify Input Purpose in WCAG 2.1. If you are making a website that should follow WCAG, you should use autocomplete with autofill.
Disabling autocompletion
To disable autocompletion in forms, you can set the autocomplete (en-US) attribute to «off»:
You can do this either for an entire form, or for specific input elements in a form:
form method="post" action="/form" autocomplete="off">[…]form>
form method="post" action="/form"> […] div> label for="cc">Credit card:label> input type="text" id="cc" name="cc" autocomplete="off" /> div> form>
Setting autocomplete=»off» on fields has two effects:
- It tells the browser not to save data inputted by the user for later autocompletion on similar forms, though heuristics for complying vary by browser.
- It stops the browser from caching form data in the session history. When form data is cached in session history, the information filled in by the user is shown in the case where the user has submitted the form and clicked the Back button to go back to the original form page.
If a browser keeps on making suggestions even after setting autocomplete to off, then you have to change the name attribute of the input element.
The autocomplete attribute and login fields
Modern browsers implement integrated password management: when the user enters a username and password for a site, the browser offers to remember it for the user. When the user visits the site again, the browser autofills the login fields with the stored values.
Additionally, the browser enables the user to choose a master password that the browser will use to encrypt stored login details.
Even without a master password, in-browser password management is generally seen as a net gain for security. Since users do not have to remember passwords that the browser stores for them, they are able to choose stronger passwords than they would otherwise.
For this reason, many modern browsers do not support autocomplete=»off» for login fields:
- If a site sets autocomplete=»off» for a , and the form includes username and password input fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.
- If a site sets autocomplete=»off» for username and password fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.
This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).
Preventing autofilling with autocomplete=»new-password»
If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete=»new-password» .
This is a hint, which browsers are not required to comply with. However modern browsers have stopped autofilling elements with autocomplete=»new-password» for this very reason. For example, Firefox version 67 (see баг 1119063) stopped autofilling in this case; however, Firefox 70 (see баг 1565407) can suggest securely-generated passwords, but does not autofill a saved password. See the autocomplete compat table (en-US) for more details.
Tools for disabling autocompletion
The jquery.disableAutoFill plugin randomizes an input’s name attribute by default. When the form is submitted, the plugin restores the original name. This prevents auto-completion for all browsers (includes third-party auto-completion extensions) but doesn’t necessarily help with login fields.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.