Обнаружение, когда автозаполнение было заполнено

Question

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

$('input').each(function() {
    var $this = $(this);

    $this.after($this.clone()).remove();
});

Проблема в том, что он не может быть запущен в load, потому что автозаполнение полей происходит через некоторое время после факта. Сейчас я запускаю его по тайм-ауту в 100 миллисекунд после load:

// Kill autofill styles
$(window).on({
    load: function() {
        setTimeout(function() {
            $('.text').each(function() {
                var $this = $(this);

                $this.after($this.clone()).remove();
            });
        }, 100);
    }
});

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

РЕДАКТИРОВАТЬ: Это автозаполнение.

автозаполнение http://dl.dropbox.com/u/2463964/autofill.png

Answer 1

Если вы используете Chrome или Safari, вы можете использовать селектор input:-webkit-autofill CSS для получения автозаполненных полей.

Пример кода обнаружения:

setInterval(function() {
    var autofilled = document.querySelectorAll('input:-webkit-autofill');
    // do something with the elements...
}, 500);

Answer 2

Есть ошибка, открывающаяся на http://code.google.com/p/chromium/issues/detail?id=46543#c22, связанная с этим, похоже, что в конечном итоге можно (должно) в итоге можно просто переписать стиль по умолчанию с помощью селектора !important, который был бы наиболее элегантнымрешение.Код будет выглядеть примерно так:

input {
    background-color: #FFF !important;
}

На данный момент, хотя ошибка все еще открыта, и кажется, что ваше хакерское решение - единственное решение для Chrome, однако a) решение для Chrome не нужно setTimeout и б) кажется, что Firefox может уважать флаг !important или какой-либо селектор CSS с высоким приоритетом, как описано в Переопределить заполнение формы в браузере и выделение ввода с помощью HTML / CSS .Это помогает?

Answer 3

$(window).load(function()
{
    if ($('input:-webkit-autofill'))
    {
        $('input:-webkit-autofill').each(function()
        {
            $(this).replaceWith($(this).clone(true,true));
        });
        // RE-INITIALIZE VARIABLES HERE IF YOU SET JQUERY OBJECT'S TO VAR FOR FASTER PROCESSING
    }
});

Я заметил, что опубликованное вами решение jQuery не копирует вложенные события. Метод, который я опубликовал, работает для jQuery 1.5+ и должен быть предпочтительным решением, поскольку он сохраняет прикрепленные события для каждого объекта. Если у вас есть решение перебрать все инициализированные переменные и повторно инициализировать их, тогда будет доступно полностью 100% рабочее решение jQuery, в противном случае вам придется заново инициализировать установленные переменные по мере необходимости.

например, вы делаете: var foo = $ ('# foo');

тогда вам придется позвонить: foo = $ ('# foo');

потому что оригинальный элемент был удален, и теперь на его месте существует клон.

Answer 4

Я предлагаю вам избегать автозаполнения на первом месте, вместо того, чтобы пытаться обмануть браузер

<form autocomplete="off">

Дополнительная информация: http://www.whatwg.org/specs/web-forms/current-work/#the-autocomplete

Если вы хотите сохранить поведение автозаполнения , но изменить стиль, возможно, вы можете сделать что-то вроде этого (jQuery):

$(document).ready(function() { 
  $("input[type='text']").css('background-color', 'white');
});