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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1-HTML способ:

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

2-Javascript способ:

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

3-jQuery способ:

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

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

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

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

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

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

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

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

$('input').attr('autocomplete','new-password');

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