Как победить автозаполнение полей формы браузером?

Question

[romaro]

Пишу фронт на Реакте и возникла необходимость в компоненте с плавающим лейблом/floating label (название поля поднимается наверх, когда поле в фокусе или содержит данные).

Но этот функционал конфликтует с опцией автозаполнения в браузере (поле заполняется после рендеринга компонента и не совсем ясно, как оповестить компонент в этом случае). То есть лейбл накладывается поверх текста.

Положение осложняется тем, что Хром перестал предоставлять возможность отключить автозаполнение (autocompleted="off").

Есть статья четырехлетней давности, где описана попытка решить эту проблему. Актуальная ли она в 2022 году или есть способ новее?

Comments

[wadowad]

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

[Антон Горецкий]

придется при создании компонента инпут добавлять ему в имя datestamp, а при отправке формы - отсекать. Можно еще после загрузки компонента попробовать очищать его (однократно, через секунду после загрузки)

Answer 1

[Ilya Kuminov]

autoComplete={'off'} в теги Form