Как отключить автозаполнение Chrome в формах

Отключение автозаполнения в Chrome при игнорировании атрибута autocomplete=“off” требует применения специализированных методов, таких как использование autocomplete=“new-password” для полей пароля, динамическое изменение атрибутов через JavaScript или применение скрытых полей для сбоя алгоритмов браузера. Эффективные решения включают также использование специфических значений автозаполнения из спецификации, изменение типа полей или настройку самого браузера через интерфейс.

Содержание

• Проблема автозаполнения в Chrome: почему autocomplete=“off” не работает
• Основные методы отключения автозаполнения в формах
• Специфические решения для разных типов полей
• Продвинутые методы обхода автозаполнения в Chrome
• Альтернативные подходы и кроссбраузерные решения
• Настройка Chrome для отключения автозаполнения через интерфейс браузера

Проблема автозаполнения в Chrome: почему autocomplete=“off” не работает

Chrome известен своим агрессивным подходом к автозаполнению форм, часто игнорируя даже явно указанный атрибут autocomplete=“off”. Это происходит потому, что Google стремится улучшить пользовательский опыт, автоматически заполняя формы сохраненными данными. Однако такая “помощь” может приводить к ошибкам, когда поле для телефона заполняется адресом электронной почты, или поле пароля автозаполняется некорректными данными.

Версия Chrome 49.0.2623.112 m и выше стала особенно агрессивной в отношении автозаполнения. Браузер использует сложные алгоритмы для распознавания полей форм и игнорирует стандартные атрибуты отключения автозаполнения в определенных случаях. Особенно часто это происходит с полями пароля и логина, где Chrome считает, что пользователь должен получить максимальное удобство.

Интересно, что браузер Chrome часто заполняет первое найденное поле подходящего типа, что можно использовать в своих интересах для управления поведением автозаполнения. Также стоит отметить, что для полей пароля Chrome имеет специальные правила автозаполнения, которые могут игнорировать даже autocomplete=“off”.

Основные методы отключения автозаполнения в формах

Использование специфических значений autocomplete

Самый эффективный способ отключить автозаполнение в Chrome - использовать нестандартные значения атрибута autocomplete. Для полей пароля следует применять autocomplete=“new-password”, что полностью отключает автозаполнение. Это значение из спецификации HTML5 и браузер Chrome уважает его в большинстве случаев.

<input type="password" autocomplete="new-password" name="user_password">

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

<input type="text" autocomplete="random-string-123" name="phone">

Динамическое изменение атрибутов через JavaScript

Если статические атрибуты не работают, можно использовать JavaScript для динамического изменения атрибута autocomplete после загрузки страницы:

document.addEventListener('DOMContentLoaded', function() {
 const passwordField = document.getElementById('password');
 passwordField.setAttribute('autocomplete', 'new-password');
 
 // Или установить случайное значение
 const randomValue = 'autocomplete-' + Math.random().toString(36).substr(2, 9);
 passwordField.setAttribute('autocomplete', randomValue);
});

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

Использование скрытых полей для сбоя алгоритмов

Еще один эффективный метод - добавление скрытых полей с тем же name, что и у видимых полей. Это сбивает алгоритмы автозаполнения Chrome:

<input type="text" name="username" style="display:none" value="">
<input type="text" name="username" autocomplete="off">

Браузер часто заполняет первое найденное поле, а скрытое поле, которое пользователь не видит, “отбирает” автозаполнение на себя. Для полей пароля этот метод работает особенно хорошо.

Специфические решения для разных типов полей

Поля пароля

Для полей пароля наиболее эффективным решением является использование autocomplete=“new-password”. Это значение полностью отключает автозаполнение в Chrome:

<input type="password" autocomplete="new-password" name="user_password">

Если это не сработает, можно использовать textarea вместо input для пароля, стилизованное как поле ввода:

<textarea name="user_password" autocomplete="new-password" 
 style="width: 200px; height: 20px; border: 1px solid #ccc; 
 font-family: monospace; -webkit-text-security: disc;"></textarea>

Поля для одноразовых паролей (OTP)

Для полей ввода одноразовых паролей используйте значение autocomplete=“one-time-code”:

<input type="text" autocomplete="one-time-code" name="otp_code" maxlength="6">

Это значение из спецификации HTML5 и Chrome распознает его как специальный тип поля для OTP.

Адресные поля

Для адресных полей используйте соответствующие значения из спецификации:

<input type="text" autocomplete="shipping street-address" name="address">
<input type="text" autocomplete="shipping postal-code" name="zip">
<input type="text" autocomplete="shipping tel" name="phone">

Поля электронной почты

Для полей электронной почты используйте autocomplete=“email”:

<input type="email" autocomplete="email" name="user_email">

Поля имени пользователя

Для полей имени пользователя используйте autocomplete=“username”:

<input type="text" autocomplete="username" name="username">

Продвинутые методы обхода автозаполнения в Chrome

Изменение типа поля

Для полей пароля можно использовать input с типом “text” и применить стили для маскировки вводимых символов:

<input type="text" name="user_password" autocomplete="new-password"
 style="-webkit-text-security: disc; font-family: monospace;">

Этот метод работает только для Chromium-браузеров, но может быть эффективен при других подходах.

Использование элемента search

Вместо стандартного input можно использовать элемент search с autocomplete=“off”:

<input type="search" autocomplete="off" name="search_field">

Иногда Chrome по-разному обрабатывает разные типы input полей.

Плагины и библиотеки

Для сложных случаев можно использовать специальные плагины, такие как jquery.disableAutoFill, который случайным образом меняет имя поля и восстанавливает его при отправке:

$(document).ready(function() {
 $('form').disableAutoFill();
});

Этот метод динамически изменяет атрибуты полей, чтобы обойти алгоритмы автозаполнения Chrome.

Дублирование полей с одинаковым name

Надежным кроссбраузерным решением является дублирование поля с тем же name и скрытие одного из них:

<input type="text" name="username" style="display:none" value="">
<input type="text" name="username" autocomplete="off">

Chrome заполняет первое найденное поле, а скрытое поле “отбирает” автозаполнение на себя.

Альтернативные подходы и кроссбраузерные решения

Использование уникальных значений name

Измените атрибут name на уникальное значение, так как браузер использует его для распознавания полей:

<input type="text" name="unique_username_field" autocomplete="off">

После отправки формы на сервере можно обработать это значение как обычное поле username.

Динамическое создание полей

Создавайте поля формы динамически после загрузки страницы с помощью JavaScript:

document.addEventListener('DOMContentLoaded', function() {
 const form = document.getElementById('myForm');
 const input = document.createElement('input');
 input.type = 'text';
 input.name = 'dynamic_field';
 input.autocomplete = 'off';
 form.appendChild(input);
});

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

Использование readonly и последующее снятие атрибута

Установите поле как readonly, а затем динамически снимите этот атрибут после загрузки страницы:

document.addEventListener('DOMContentLoaded', function() {
 const field = document.getElementById('sensitive_field');
 field.readOnly = true;
 setTimeout(() => {
 field.readOnly = false;
 }, 100);
});

CSS-маскировка полей

Используйте CSS для маскировки полей, которые должны быть невидимы для автозаполнения, но видимы для пользователя:

.hidden-for-autocomplete {
 position: absolute;
 left: -9999px;
 top: -9999px;
 height: 1px;
 width: 1px;
 overflow: hidden;
}

<input type="text" name="username" class="hidden-for-autocomplete" autocomplete="off">
<input type="text" name="username" autocomplete="off">

Настройка Chrome для отключения автозаполнения через интерфейс браузера

Если программные методы не работают, можно отключить автозаполнение непосредственно в настройках Chrome:

1. Откройте Chrome и перейдите в меню (три точки в右上 углу)
2. Выберите “Настройки”
3. Прокрутите вниз до раздела “Автозаполнение и пароли”
4. Отключите следующие опции:

• “Пароли”
• “Способы оплаты”
• “Адреса и другие данные”

Чтобы удалить уже сохраненные данные автозаполнения:

1. Введите в адресную строку chrome://settings/clearBrowserData
2. Выберите вкладку “Дополнительные”
3. Включите опцию “Данные для автозаполнения”
4. Нажмите “Удалить данные”

Если вы используете аккаунт Google, изменения в настройках автозаполнения синхронизируются на всех устройствах, где авторизован этот аккаунт.

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

Источники

1. Skypro Wiki — Руководство по отключению автозаполнения в Chrome и решению проблем: https://sky.pro/wiki/html/otklyuchenie-avtozapolneniya-v-chrome-reshenie-problemy/
2. MDN Web Docs — Практическое руководство по отключению автозаполнения форм: https://developer.mozilla.org/ru/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion
3. Stack Overflow на русском — Обсуждение проблем с autocomplete=“off” в Chrome: https://ru.stackoverflow.com/questions/1371030/autocomplete-off-не-работает-в-chrome
4. Habr Q&A — Ответы разработчиков о методах обхода автозаполнения Chrome: https://qna.habr.com/q/314362
5. Skypro Wiki — Решение проблем с игнорированием autocomplete=“off” в Chrome: https://sky.pro/wiki/html/reshenie-problemy-s-ignorirovaniem-autocomplete-off-v-chrome/
6. remontka.pro — Инструкция по включению/отключению автозаполнения в Chrome через интерфейс: https://remontka.pro/enable-disable-autofill-chrome/

Заключение

Отключение автозаполнения Chrome в формах, когда стандартный атрибут autocomplete=“off” не работает, требует применения специализированных методов. Наиболее эффективными являются использование autocomplete=“new-password” для полей пароля, динамическое изменение атрибутов через JavaScript, применение скрытых полей для сбоя алгоритмов или изменение типа поля. Для разных типов полей существуют специфические значения автозаполнения из спецификации HTML5, которые можно использовать для управления поведением браузера. В крайних случаях можно отключить автозаполнение через настройки самого Chrome, хотя это затронет все сайты. Комбинирование этих методов позволяет надежно предотвратить неправильное автозаполнение форм в Chrome и обеспечить корректную работу пользовательского интерфейса.