Как узнать что браузер сделал автозаполнение

Question

У нас есть форма, например логинка. В ней два поля ввода: электронный адрес и пароль. И после первого входа я попросил броузер запомнить введённые значения полей по понятным причинам. При повторном открытии логинки в текстовые поля вставятся значения.

Пример когда броузер подставил пароль(обвёл желтым):

Как я могу узнать, что броузер сделал это?

Answer 1

В общем случае, есть как минимум два варианта решения:

Использовать MutationObserver на изменение атрибута value целевого элемента
Использовать EventListeners на событие change целевого элемента

Конечно, можно вызывать функцию по таймеру, в которой проверять заполненность поля, но мне такое решение не нравится.

Answer 2

После автозаполнения поля браузер меняет цвет фона. Поэтому действенный способ - это в обработчике изменения элемента прорерить не поменялся ли цвет фона элемента:

  let style = window.getComputedStyle(document.getElementById('password'))
  if (style && style.backgroundColor !== initialBackgroundColor) {
    // сюда попадаем если браузер заполнил автоматически
  }

initialBackgroundColor - ставим такой как у нас изначально.

БЛОГ НА HUSL

Как узнать что браузер сделал автозаполнение

Ответы (2 шт):