Отключение автозаполнения в Chrome | Кодементор

Также опубликовано в моем блоге

Автозаполнение элементов формы — очень полезная функция браузеров. Создание новых учетных записей или покупка в интернет-магазине — примеры того, как эта функция экономит наше время.

Однако функция автозаполнения может быть проблемой для продуктов SaaS. Представьте, что вы хотите изменить адрес электронной почты одного из ваших пользователей. Вы нажимаете «Изменить» на одном экране, и как только вы получаете форму с вашими данными пользователя, Chrome заменяет их адрес электронной почты на ваш адрес электронной почты. Это не очень хороший пользовательский опыт.

На MDN есть статья «Как отключить автозаполнение форм». Решение заключается в использовании атрибута автозаполнения со значением off. Это не работает в Chrome.

Копаясь в результатах Stackoverflow и Google, я нашел ошибка, выпущенная в 2015 году по теме. Вот TL,DR (от марта 2016 г.):

Во-первых, спасибо всем за отзывы об этом. Я прошу прощения за задержку с разъяснением нашей позиции. Мы работали над завершением нашей политики в отношении автозаполнения и атрибута автозаполнения, и мы вносили в нее изменения за последние несколько месяцев (как некоторые из вас заметили).

Прежде всего, функция автозаполнения в Chrome предназначена для того, чтобы помочь нашим обычным пользователям использовать стандартные формы (адресные формы, контактные формы, формы оформления заказа и т. д.) в Интернете. Это стало особенно важным на мобильных устройствах, где печатать на виртуальной клавиатуре сложно и неприятно. Автозаполнение пытается улучшить этот опыт, и пользователи Chrome используют его миллионы раз в день.

Сложность здесь заключается в том, что где-то на пути в Интернете autocomplete=off стал значением по умолчанию для многих полей формы, без каких-либо реальных размышлений о том, хорошо это или нет для пользователей. Это не означает, что есть не очень допустимые случаи, когда вам не нужны данные автозаполнения браузера (например, в системах CRM), но в целом мы рассматриваем такие случаи как меньшинство. И в результате мы начали игнорировать autocomplete=off для данных Chrome Autofill. [1].

Однако мы не просто игнорируем атрибут автозаполнения. В стандарте WHATWG мы определили ряд новых значений автозаполнения, которые разработчики могут использовать для лучшего информирования браузера о том, что представляет собой конкретное поле, и мы рекомендуем разработчикам использовать эти типы. [2]

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

Например, если у вас есть поле ввода адреса в инструменте CRM, которое вы не хотите, чтобы Chrome автоматически заполнил, вы можете придать ему семантическое значение, которое имеет смысл относительно того, что вы запрашиваете: например, autocomplete=”new-user -адрес улицы». Если Chrome обнаружит это, он не будет пытаться автоматически заполнить поле.

Я также нашел суть с несколькими решениями. Многие люди сообщили об использовании autocomplete="new-password" исправляет эту проблему, но у меня не было успеха на этом фронте. Что решило проблему для меня, так это настроить поля формы только для чтения, а затем удалить атрибут, как только пользователь сфокусирует их.

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" type="text" value="user@email.com">