Вимкнути автозаповнення через CSS

Чи можна використовувати CSS для вимкнення автозаповнення елемента форми (зокрема, текстового поля)?

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

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

Це, принаймні, безпечна альтернатива для переглядачів, але я б рекомендував піти з відповіддю від RobertsonM ( autocomplete="off").

На даний момент в CSS немає атрибута "автозаповнення". Однак у html є простий код для цього:

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

Якщо ви шукаєте ефектор на всьому сайті, простим було б просто мати функцію js для проходження всіх "входів" та додавання цього тегу, або шукати відповідний клас / ідентифікатор css.

Атрибут автозаповнення чудово працює в Chrome та Firefox (!), Але також див. Чи існує W3C дійсний спосіб вимкнути автозаповнення у формі HTML?

Ви можете легко реалізувати за допомогою jQuery

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

Якщо ви використовуєте a, 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" для полів імені користувача та пароля, тоді браузер все одно запропонує запам'ятати цей логін, і якщо користувач погодиться, браузер автоматично заповнить ці поля наступного разу, коли користувач відвідає сторінку. Це поведінка у Firefox (з версії 38), Google Chrome (з 34) та Internet Explorer (з версії 11).

Якщо ви визначаєте сторінку управління користувачами, де користувач може вказати новий пароль для іншої особи, і тому ви хочете запобігти автоматичному заповненню полів паролів, ви можете використовувати autocomplete = "new-password" ; проте підтримка цього значення у Firefox не реалізована.

Це просто спрацювало. Я спробував спеціально в chrome, і сподіваюся, це продовжує працювати і допомагати іншим.

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

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

Завдяки рішенню @ ahhmarr мені вдалося вирішити ту саму проблему в моєму середовищі користувальницького інтерфейсу Angular + , яку я поділюсь тут для тих, хто зацікавлений.

У свій 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.

Є 3 шляхи до цього, я згадую їх, щоб бути кращим способом ...

1-HTML спосіб:

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

2-Javascript спосіб:

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

3-jQuery спосіб:

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

Я просто використовую 'new-password'замість цього'off' на автозаповнення.

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

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

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