jQuery: Какого слушателя я использую для проверки на браузер автоматического заполнения поля ввода пароля?
У меня есть простая проблема, которой я, может казаться, не нахожу решение.
В основном на этом веб-сайте здесь: http://dev.supply.net.nz/vendorapp/ (в настоящее время в разработке) у меня есть некоторое воображение label анимации, задвигающие вещи и на focus & blur.
Однако, после того как пользователь вошел в систему, после того как браузер будет, скорее всего, помнить пароль, связанный с пользовательским адресом электронной почты / вход в систему. (Который хорош и не должен быть отключен.)
Однако я сталкиваюсь с проблемами, инициировавшими мой label выдвиньте анимацию, когда браузер установит значение на #password поле автоматически как событие для этого не ни один focus ни blur.
Кто-либо знает который слушатель использовать для выполнения моей функции когда браузер 'автоматические заливки' пользовательский пароль?
Вот быстрый снимок экрана проблемы:
Автозаливка пароля маркирует Issue http://dl.dropbox.com/u/376243/fill_issue.png
3 ответа
Недавно я прочитал статью под названием Capturing AutoFill as a Change Event, которая может оказаться тем, что вы ищете. Автор создал функцию под названием listenForChange(), которая отслеживает поле на предмет активности автозаполнения формы (автозаполнение - это вообще слово?). Поскольку она проверяет вашу форму очень часто, я лично советую вам запускать ее только определенное количество раз. В конце концов, автозаполнение формы обычно делает свою работу, как только страница завершает загрузку.
Цитирую оригинальную статью:
Плагин использует функции trigger() и data(). В двух словах, мы перебираем входной элемент или набор дочерних элементов ввода, сохраняя их начальное значение в кэше данных предоставляемом функцией 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.
Также вам, вероятно, следует установить слушателя на изменения:
$('#password').change(function() {
// DEAL WITH IT IF THERE IS CONTENT IN IT AND THE LABEL IS STILL THERE
});
Вам нужно будет вручную запустить событие в вашем .ready ()
var $p = $('#password');
if($p.val() != '') {
$('#password').focus();
}