Решение проблемы с игнорированием autocomplete='off' в Chrome

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

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

Пример для текстовых полей:

<input type="text" autocomplete="no-autofill-please">

Для полей с паролями:

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

Встраивайте эти атрибуты непосредственно в ваш HTML-код для корректного управления автозаполнением в Chrome.

Обход настойчивого автозаполнения Chrome

Иногда браузеры надоедают своей усердностью в помощи пользователям и настойчиво игнорируют autocomplete="off". В данном разделе мы рассмотрим способы, которые помогут вам обойти это навязчивое поведение.

Динамическое управление при помощи JavaScript

С помощью JavaScript можно динамически изменять атрибут autocomplete, что позволяет эффективно контролировать поля ввода:

// Автозаполнение, тебе уже не нужно здесь.
document.getElementById("myInput").autocomplete = "new-attribute-value";

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

Невидимые поля для сбивания с толку

Чтобы запутать алгоритм автозаполнения, добавьте в форму неактивные скрытые поля:

<!-- Chrome, встречай своих невидимых друзей -->
<input type="text" style="display:none">
<input type="password" style="display:none">
<!-- Затем идут реальные поля формы -->

Креативность в значениях атрибутов

Используйте экстравагантные и одновременно функциональные значения атрибутов, например, "no-autofill-please" или "new-password", чтобы ввести в заблуждение механизм автозаполнения Chrome.

Readonly до получения фокуса

Устанавливайте поля ввода в состояние только чтения, которые становятся доступными после клика пользователя:

<!-- Обозначь свое присутствие, и ты сможешь меня редактировать -->
<input type="text" readonly onfocus="this.removeAttribute('readonly');">

Элемент поиска как средство борьбы

Замените стандартный <input type="text"> на <input type="search">, установив autocomplete="off" — это может оказаться эффективным:

<!-- Элемент поиска, который абсолютно не стремится к автозаполнению -->
<input type="search" autocomplete="off">

Будьте всегда в курсе

Браузеры постоянно развиваются; следите за новейшими обновлениями от их разработчиков, чтобы всегда быть впереди.

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

Атрибут autocomplete="off" рассматривается как вежливая просьба, которую Chrome часто предпочитает игнорировать:

Как бы вы ни убеждали Chrome (🌐) оставить автозаполнение в покое, он склонен продолжать в том же духе (🎵).

Мастерская контроля: методы для современных форм

Чтобы подавить функцию автозаполнения Chrome, придется прибегнуть к хитрости и заботиться об удобстве пользовательских интерфейсов. Вот несколько эффективных методов:

Прозрачные приманки

Браузеры не занимаются заполнением невидимых полей, поэтому сделайте эти поля прозрачными и абсолютно позиционированными:

<!-- Невидимое поле для вашей формы -->
<input type="text" style="opacity:0; position: absolute;">

Возможности jQuery

С использование jQuery динамически добавляйте поля со своим собственными значениями атрибута autocomplete:

// jQuery хитро создает поле ввода прямо на глазах у Chrome
$('<input>').attr({
    type: 'text',
    name: 'hidden',
    autocomplete: 'no-thanks'
}).appendTo('form');

Уникальность значений атрибутов

Используйте уникальные и творческие значения атрибутов, чтобы нарушить привычки Chrome:

<!-- Автозаполнение не пройдет мимо такого уникального значения -->
<input type="text" autocomplete="unique-attribute-value">

Тестирование в разных браузерах

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

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

1. Атрибут HTML: autocomplete – HTML: язык гипертекстовой разметки | MDN — подробное описание от MDN о том, как работает атрибут autocomplete.
2. Блог Chromium — обзор улучшенных функций автозаполнения от команды Chromium.
3. Блог Google о безопасности — анализ компании Google о безопасностных аспектах использования атрибутов autocomplete.
4. Отключение автозаполнения Chrome – Stack Overflow — обсуждение сообщества о выключении автозаполнения Chrome.
5. Chrome игнорирует autocomplete="off" – Stack Overflow — подробное изучение отношения Chrome к autocomplete="off", основанное на опыте пользователей Stack Overflow.
6. HTML Standard — спецификация HTML от W3C, предоставляющая официальное определение и описывающая ожидаемое поведение атрибута autocomplete.
7. Отключение автозаполнения для поля ввода | CSS-Tricks — CSS-Tricks делится советами по перенастройке автозаполнения в веб-формах.