jQuery:我使用什么侦听器来检查浏览器是否自动填充密码输入字段? [英] jQuery: What listener do I use to check for browser auto filling the password input field?
问题描述
我有一个简单的问题,我似乎找不到解决办法.
I have a simple problem that I cannot seem to find a solution to.
基本上在这个网站上:http://dev.supply.net.nz/vendorapp/(目前正在开发中)我有一些花哨的 label
动画,可以在 focus
和模糊
.
Basically on this website here: http://dev.supply.net.nz/vendorapp/ (currently in development)
I have some fancy label
animations sliding things in and out on focus
& blur
.
但是,一旦用户登录,浏览器很可能会记住与用户电子邮件地址/登录名相关联的密码.(这很好,不应该被禁用.)
However once the user has logged in once the browser will most likely remember the password associated with the users email address/login. (Which is good and should not be disabled.)
但是,当浏览器自动在 #password
字段上设置值时,我遇到了触发我的 label
滑出动画的问题,因为此事件既不是 焦点
或blur
.
However I run into issues triggering my label
slide out animation when the browser sets the value on the #password
field automatically as the event for this is neither focus
nor blur
.
当浏览器自动填充"用户密码时,有人知道使用哪个侦听器来运行我的函数吗?
Does anyone know which listener to use to run my function when the browser 'auto fills' the users password?
这是问题的快速屏幕截图:
Here is a quick screenshot of the issue:
密码自动填充标签问题 http://dl.dropbox.com/u/376243/fill_issue.png
推荐答案
我最近阅读了一篇名为 捕获自动填充作为更改事件,这可能正是您正在寻找的.作者创建了一个名为 listenForChange()
的函数,用于监视表单自动填充活动的字段(自动填充甚至是一个词?).由于它非常频繁地检查您的表单,我个人建议您只运行一定次数.毕竟,表单自动填充通常会在页面加载完成后立即开始工作.
I recently read an article called Capturing AutoFill as a Change Event that just may be what you're looking for. The author created a function called listenForChange()
that monitors a field for form autofilling activity (is autofilling even a word?). Since it checks your form really frequently I personally suggest you to only run this a certain number of times. After all a form auto-fill will usually do its work as soon as the page has finished loading.
引用原文:
该插件使用了 trigger() 和 data() 函数.简而言之,我们循环输入元素或集合子输入元素,存储它们在数据缓存中的初始值由 data() 函数提供.我们然后检查存储的值是否匹配期间输入的值当前迭代.如果是这样,我们做什么都没有,如果没有,我们手动触发通过 trigger() 更改事件.有还有一些逻辑可以忽略具有焦点的元素.我们不需要担心这个元素,因为如果值改变而用户有焦点,更改事件将在正常情况下被解雇元素模糊.
这里是函数本身,以防您不想阅读文章(您应该阅读):
And here's the function itself incase you don't want to go and read the article (which you should):
(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 的所有者.
All credit goes to the owner of FurryBrains.com for writing the article.
这篇关于jQuery:我使用什么侦听器来检查浏览器是否自动填充密码输入字段?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!