Решение проблемы с игнорированием 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 |
---|---|
Без автозаполнения | "Я вижу все ваши данные..." (👀👂) |
С autocomplete="off" | "Что ты говоришь? Не слышу!" (🙉) |
Как бы вы ни убеждали 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">
Тестирование в разных браузерах
Для обеспечения единообразного пользовательского опыта важно тестировать ваши решения в различных браузерах.
Полезные материалы
- Атрибут HTML: autocomplete – HTML: язык гипертекстовой разметки | MDN — подробное описание от MDN о том, как работает атрибут autocomplete.
- Блог Chromium — обзор улучшенных функций автозаполнения от команды Chromium.
- Блог Google о безопасности — анализ компании Google о безопасностных аспектах использования атрибутов autocomplete.
- Отключение автозаполнения Chrome – Stack Overflow — обсуждение сообщества о выключении автозаполнения Chrome.
- Chrome игнорирует autocomplete="off" – Stack Overflow — подробное изучение отношения Chrome к autocomplete="off", основанное на опыте пользователей Stack Overflow.
- HTML Standard — спецификация HTML от W3C, предоставляющая официальное определение и описывающая ожидаемое поведение атрибута autocomplete.
- Отключение автозаполнения для поля ввода | CSS-Tricks — CSS-Tricks делится советами по перенастройке автозаполнения в веб-формах.