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屋！