Отключение автозаполнения в Chrome: решение проблемы

Быстрый ответ

Для отключения автозаполнения в браузере Chrome вы можете воспользоваться следующими подходами:

• Добавьте скрытое поле с рандомно сгенерированным именем и атрибутом autocomplete="new-password".
• Примените атрибут autocomplete="off" к текущему полю ввода.

<input type="text" name="foo" autocomplete="new-password" style="display:none;">
<input type="text" name="bar" autocomplete="off">

Нужно помнить, что такие решения могут быть ненадежны с учётом будущих обновлений браузеров.

Использование атрибута autocomplete

Атрибут autocomplete способствует удобству работы с формой, однако в случаях, когда автозаполнение не нужно, следует знать, как его отключить.

Для полей с одноразовыми паролями

Чтобы предотвратить автозаполнение полей для одноразовых паролей (OTP), можно использовать следующую конструкцию:

<input type="text" autocomplete="one-time-code">

Подробнее об этом расскажет наш спикер на видео

Как избежать автозаполнения полей адреса

Для полей с адресной информацией можно использовать такой подход:

<input type="text" autocomplete="new-user-street-address"> <!-- Это не значит, что адрес придуман! -->

Творческое использование нестандартных значений

Можно экспериментировать с необычными значениями атрибута autocomplete, например:

<input type="text" id="field1" autocomplete="do-not-autofill"> <!-- Слово "не" здесь действительно играет роль! -->

Визуализация

Как изменится работа с формами в Chrome после отключения автозаполнения:

До изменений                      После изменений
───────────────────────────     ────────────────────────────
🧙‍♂️📝 [ Имя пользователя ]             ✋🧙‍♂️📝 [ Имя пользователя ]
🧙‍♂️🔑 [ Пароль ]                     ✋🧙‍♂️🔑 [ Пароль ]
//Автозаполнение активно      //Автозаполнение отключено

Подход для отключения автозаполнения в Chrome:

<input type="text" name="email" autocomplete="off" />
<input type="password" name="password" autocomplete="new-password" />

Предотвращайте автозаполнение словно Нео из "Матрицы" с использованием autocomplete="off" и autocomplete="new-password".

Оставайтесь начеку и обходите автозаполнение

Кажется, функция автозаполнения в Chrome не улавливает подсказки, поэтому требуется быть начеку и применять следующие стратегии.

Скрытые фиктивные и недоступные поля

Включите в форму скрытые или визуально недоступные поля:

<input type="text" style="position:absolute; top:-500px"> <!-- Пока еще в поисках Валли -->

Поля в режиме "только для чтения"

Поля по умолчанию могут быть доступны только для чтения и активироваться при взаимодействии с пользователем:

document.getElementById('myInput').addEventListener('focus', (event) => {
  event.target.readOnly = false; // При фокусировке на поле оно становится доступным для ввода
});

Передайте контроль пользователю

Убедитесь, что пользователи знают, как корректировать настройки автозаполнения в своем браузере. Ведь просто иметь корабль не делает человека капитаном.

Динамическая загрузка элементов

Если все упомянутые выше методы не работают, можно попробовать использовать JavaScript для обхода автозаполнения:

setTimeout(function() {
  document.getElementById('dynamicField').style.display = 'block'; // Поле становится видимым на экране 
}, 1000);

Полезные материалы

1. MDN Web Docs: :autofill – CSS: каскадные таблицы стилей
2. Stack Overflow: Отключение автозаполнения в Chrome
3. HTML стандарт
4. W3Schools: Атрибут автозаполнения HTML input
5. Google Developers Web Fundamentals: Автозаполнение
6. CanIUse: Таблицы совместимости HTML5, CSS3 и т.д.
7. Web.dev: Автозаполнение