Отключить автозаполнение через CSS

94

Можно ли использовать CSS для отключения автозаполнения в элементе формы (в частности, в текстовом поле)?

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

Дэвид
источник

Ответы:

52

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

По крайней мере, это кроссбраузерная альтернатива, но я бы рекомендовал воспользоваться ответом от RobertsonM ( autocomplete="off").

Кристофер Клевес
источник
4
Побочным эффектом этого является то, что история браузера загромождена множеством различных (случайных) полей формы. Каждый поиск известных значений в локальной базе данных браузеров займет некоторое время.
dermatthias
4
Хорошая идея, но она не препятствует сохранению номеров кредитных карт в незашифрованной базе данных автозаполнения.
Hans-Peter Störr
Если вы не используете статические имена / идентификаторы элементов управления, любой сценарий будет нарушен, и любой сбор данных формы также сломается (если каждый аспект вашего приложения не знает о новом соглашении об именах и динамически обновляет любые сценарии / сбор данных. ).
Гэри Рихтер
Вы должны избегать автозаполнения, "рандомизация" имен полей - единственный реальный выход. Любые подсказки вроде autocomplete="off"игнорируются в версии браузера X (текущая + 1). (Например, последняя
версия
@kmoser: Даже если вы откажетесь от функции автозаполнения браузера путем случайного выбора элемента, idон все равно сохранит его в кеше (то есть на жестком диске пользователя). Что ужасно делать с номером кредитной карты или любой другой конфиденциальной информацией. Кроме того, это излишне загромождает дисковые накопители вашего пользователя. Каждый раз, когда они посещают вашу страницу, на их компьютере будет сохраняться новый файл (похожий на cookie). На всякий случай попробуйте очистить кеш Chrome и посмотреть, сколько места он освободит (если вы не делали этого какое-то время). Вот почему я считаю это ужасной идеей.
c00000fd 04
129

В настоящее время в CSS нет атрибута «автозаполнение выключено». Однако в html для этого есть простой код:

<input type="text" id="foo" value="bar" autocomplete="off" />

Если вы ищете эффектор для всего сайта, проще всего было бы просто использовать js-функцию для прохождения всех 'input' и добавления этого тега или искать соответствующий класс / идентификатор css.

Атрибут автозаполнения отлично работает в Chrome и Firefox (!), Но см. Также Есть ли действительный способ W3C отключить автозаполнение в HTML-форме?

Робертсон М.
источник
4
developer.mozilla.org/en-US/docs/Web/Security/… предполагает, что autocomplete="anyrandominvalidvalue"будет работать.
Эндрю Сталкер
49

вы можете легко реализовать с помощью jQuery

$('input').attr('autocomplete','off');
ахмарр
источник
4
В большинстве случаев $ ('form'). Attr ('autocomplete', 'off'); гораздо более эффективен (см. комментарий к ответу ниже)
irakli
@irakli В моем случае использование form- ЕДИНСТВЕННОЕ, что сработало. Нет input. Спасибо.
хаверим
1
Привет, 2018, и это единственный способ заставить это работать в наши дни. Кроме того, @irakli это верно, если вам нужно использовать всю форму, используя форму в качестве селектора.
Devon Kiss
15

Если вы используете, formвы можете отключить все автозаполнения с помощью,

<form id="Form1" runat="server" autocomplete="off">
Эрнест
источник
действительно, согласно Mozilla: «Если атрибут автозаполнения не указан для элемента ввода, тогда браузер использует значение атрибута автозаполнения владельца формы элемента <input>. Владелец формы является либо элементом формы, которым этот элемент <input> является потомок или элемента формы, идентификатор которого указан в атрибуте form элемента input. Для получения дополнительной информации см. атрибут autocomplete в <form>. " учитывая, что это гораздо более эффективная альтернатива jQuery, чем показанная выше: $ ('form'). attr ('autocomplete', 'off');
irakli
13

У CSS нет такой возможности. Вам нужно будет использовать сценарии на стороне клиента.

Сампсон
источник
1
Есть идеи, как отключить это в краю? Что бы мы ни делали, мы это видим.
Бенджамин Грюнбаум
@BenjaminGruenbaum Using autocomplete="false"будет работать в Edge. Технически здесь может использоваться любое недопустимое значение.
Эндрю
4

Я пробовал все предложенные способы из ответов на этот вопрос и других статей в Интернете, но все равно не работал. Я попробовал autocomplete = "new-random-value", autocomplete = "off" в элементе формы, используя клиентский скрипт, как показано ниже, но за пределами $ (document) .ready (), как упомянул один из пользователей:

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

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

По этой причине многие современные браузеры не поддерживают autocomplete = "off" для полей входа:

Если сайт устанавливает autocomplete = "off" для a, а форма включает поля для ввода имени пользователя и пароля, тогда браузер все равно будет предлагать запомнить этот логин, и если пользователь соглашается, браузер автоматически заполнит эти поля при следующем входе пользователя. посещает страницу. Если сайт устанавливает autocomplete = "off" для полей имени пользователя и пароля, тогда браузер по-прежнему будет предлагать запомнить этот логин, и, если пользователь соглашается, браузер автоматически заполнит эти поля при следующем посещении страницы пользователем. Это поведение в Firefox (начиная с версии 38), Google Chrome (с 34 года) и Internet Explorer (с версии 11).

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

Это просто сработало. Я специально пробовал в Chrome и надеюсь, что это продолжит работать и поможет другим.

QMaster
источник
1

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

$("input").attr("autocomplete", "fake-name-disable-autofill");
Webdma
источник
1

Для этого есть 3 способа, я упоминаю их, чтобы они были лучше ...

1-HTML способ:

<input type="text" autocomplete="false" />

2-Javascript способ:

document.getElementById("input-id").getAttribute("autocomplete") = "off";

3-jQuery способ:

$('input').attr('autocomplete','off');
сина
источник
0

Благодаря решению @ahhmarr я смог решить ту же проблему в моем Angular + ui-router среде , которой я поделюсь здесь для всех, кто заинтересован.

В моем index.html я добавил следующий сценарий:

<script type="text/javascript">
    setTimeout(function() {
        $('input').attr('autocomplete', 'off');
    }, 2000);
</script>

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

$rootScope.$on('$stateChangeStart', function() {
                $timeout(function () {
                    $('input').attr('autocomplete', 'off');
                }, 2000);
            });

Таймауты предназначены для отображения HTML перед применением jquery.

Если вы найдете лучшее решение, дайте мне знать.

TrampGuy
источник
0

Вы не можете использовать CSS для отключения автозаполнения, но можете использовать HTML:

<input type="text" autocomplete="false" />

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

Андрей
источник
0

Я просто использую 'new-password'вместо этого 'off'автозаполнение.

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

$('input').attr('autocomplete','new-password');
Кусукакоклат
источник
-5
$('input').attr('autocomplete','off');
Рохит
источник
3
Это не дает ответа на заданный вопрос. OP специально запросил решение CSS. Кроме того, это точно такой же ответ, что и уже существующий.
Holger Just