jQuery: какой слушатель я использую, чтобы проверить браузер, автоматически заполняющий поле ввода пароля?

Question

У меня есть простая проблема, которую я не могу найти решение.

В основном на этом сайте здесь: http://dev.supply.net.nz/vendorapp/ (в настоящее время в разработке) У меня есть некоторые модные label анимации скольжениявещи, входящие и выходящие на focus & blur.

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

Однако я сталкиваюсь с проблемами, вызывающими мою label анимацию выдвижения, когда браузер автоматически устанавливает значение в поле #password, так как событие для этого не является ниfocus nor blur.

Кто-нибудь знает, какой слушатель будет использоваться для запуска моей функции, когда браузер автоматически заполняет пароль пользователя?

Вот краткий снимок экрана проблемы:

Проблема с автозаполнением пароля http://dl.dropbox.com/u/376243/fill_issue.png

Answer 1

Я недавно прочитал статью под названием Захват автозаполнения как события изменения , которая может быть именно тем, что вы ищете.Автор создал функцию с именем listenForChange(), которая отслеживает поле для автозаполнения формы (является ли автозаполнение даже словом?).Поскольку он очень часто проверяет вашу форму, я лично советую вам запускать ее только определенное количество раз.В конце концов, автозаполнение формы обычно выполняет свою работу, как только страница закончит загрузку.

Цитирование оригинальной статьи:

Плагин используетфункции триггера () и данных ().В двух словах, мы перебираем элемент input или набор дочерних элементов input, сохраняя их начальное значение в кеше данных, предоставляемом функцией data ().Затем мы проверяем, соответствует ли сохраненное значение значению ввода во время текущей итерации.Если это так, мы ничего не делаем, если нет, мы вручную запускаем событие изменения с помощью trigger ().Там также есть немного логики, чтобы игнорировать элемент, который имеет фокус.Нам не нужно беспокоиться об этом элементе, поскольку, если значение изменяется, когда пользователь находится в фокусе, событие изменения будет запускаться как обычно, когда элемент размыт.

Ивот сама функция, если вы не хотите идти и читать статью (которую вы должны):

(function($) {
    $.fn.listenForChange = function(options) {
        settings = $.extend({
            interval: 200 // in microseconds
        }, options);

        var jquery_object = this;
        var current_focus = null;

        jquery_object.filter(":input").add(":input", jquery_object).focus( function() {
            current_focus = this;
        }).blur( function() {
            current_focus = null;
        });

        setInterval(function() {
            // allow
            jquery_object.filter(":input").add(":input", jquery_object).each(function() {
                // set data cache on element to input value if not yet set
                if ($(this).data('change_listener') == undefined) {
                    $(this).data('change_listener', $(this).val());
                    return;
                }
                // return if the value matches the cache
                if ($(this).data('change_listener') == $(this).val()) {
                    return;
                }
                // ignore if element is in focus (since change event will fire on blur)
                if (this == current_focus) {
                    return;
                }
                // if we make it here, manually fire the change event and set the new value
                $(this).trigger('change');
                $(this).data('change_listener', $(this).val());
            });
        }, settings.interval);
        return this;
    };
})(jQuery);

Вся благодарность принадлежит владельцу FurryBrains.com за написание статьи.

Answer 2

Также вы, вероятно, должны также включить слушателя в изменения:

$('#password').change(function() {
    // DEAL WITH IT IF THERE IS CONTENT IN IT AND THE LABEL IS STILL THERE
});

Answer 3

Вам нужно вручную запустить событие в вашем .ready ()

var $p = $('#password');
if($p.val() != '') {
  $('#password').focus();
}