@bellord

Как получить данные автозаполнения?

Исходные данные:
форма, данные с которой запомнил браузер хром.
инпуты, у которых динамическое позиционирование лейбла (названия инпута). Если инпут не заполнен, то лейбл на месте плейсхолдера, если на инпуте фокус или есть данные, то лейбл плавно уходит выше.

Суть проблемы:
После загрузки страницы (до клика/таба по нему!) данные автозаполнения и лэйбл накладываются друг на друга.
после клика (в любом месте) все становится на свои места.
Скрипт читает инпут и выставляет соответствующий атрибут, в зависимости от его значения CSS позиционирует лэйбл.

Особенности:
Если сделать клик/таб по окну, то css/js отрабатывают как и планировалось.
До клика/таба при получении значения инпута имеем пустое значение хотя в нем явно имеется значение автозаполнения.
Игра с settimeout и тригерами успехов не дала.

Вопрос:
Как избавится от артефакта с автозаполнением, оставив прежний дизайн и сохранив браузерное автозаполнение полей.
  • Вопрос задан
  • 119 просмотров
Пригласить эксперта
Ответы на вопрос 2
hzzzzl
@hzzzzl
есть псевдо-элемент :placeholder-shown
https://css-tricks.com/almanac/selectors/p/placeho...

может выйдет скомбинировать что-то в этом духе без JS
https://css-tricks.com/css-only-floated-labels-wit...
Ответ написан
kellas
@kellas
веб-разработчик
Лучше всего это сделать только на css без js , как и советовали выше используя :placeholder-shown - https://codepen.io/team/css-tricks/pen/XVBLRM

/* накладываем label на пустой input  */
input:placeholder-shown + label {
  overflow: hidden;
  transform-origin: left bottom;
  transform: translate(0, 2.125rem) scale(1.5);
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы