Обнаружение сохраненной входной информации Chrome с помощью Jquery?

Question

Я использую jquery для разработки заполнителя текста поверх ввода, который слегка затухает, когда ввод получает фокус, и полностью исчезает, когда пользователь печатает. Эта часть отлично работает. Итак, чтобы избежать конфликта с сохраненным текстом, я обернул код в:

if(!$($input).val()) {

...create placeholder, set up rules for fading it, etc...

}

Если у пользователя есть сохраненный пароль, например, в Firefox, браузер обнаружит, что ввод имеет значение, а затем не создаст текст-заполнитель.

В Chrome, однако, Chrome не загружает сохраненное значение до тех пор, пока страница не будет «загружена», что означает, что он обнаруживает, что ввод пуст, создает текст-заполнитель, а затем после загрузки страницы, помещает сохраненное значение во входные данные, в результате чего заполнитель и пароль накладываются друг на друга.

Как я могу определить, как Chrome заполняет форму, чтобы избежать этого печального совпадения?

Answer 1

В конце я заметил, что Chrome не вызывает какого-либо события при автозаполнении, но если вы подождете до window.load, а затем проверьте, имеет ли какой-либо ввод -webkit-autofill, вы можете проверить их тогда.Как вы можете видеть, я также использую debouncer (Бен Алман - http://benalman.com/projects/jquery-throttle-debounce-plugin/), чтобы ждать еще 200 миллисекунд, поскольку даже после window.load он иногда еще не вставил текст автозаполнения ...

$(window).load($.debounce(200, function () {

       if ($('input:-webkit-autofill')) {

           // We know that this form has autofill on its way. Let's check this again after a delay as its not always done on window.load

           $('input:-webkit-autofill').each(function () {

               if ($(this).val() !== "") {
                   $(this).parent().find('label').hide();
               }

           });

       }

    }));