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

Question

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

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

Answer 1

В сущности, в CSS нет атрибута «автозаполнение». Тем не менее, HTML имеет простой код для этого:

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

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

<form id="Form1" runat="server" autocomplete="off">

Answer 5

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

Answer 6

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

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

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

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

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

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

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

Answer 7

Благодаря решению @ 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.

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

Answer 8

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

$("input").attr("autocomplete", "fake-name-disable-autofill");

Answer 9

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