jQuery:我用什么监听器来检查浏览器自动填写密码输入字段？

Question

我有一个简单的问题,我似乎无法找到解决方案.

基本上在这个网站上:http://dev.supply.net.nz/vendorapp/(目前正在开发中)我有一些花哨的label动画在focus&上滑动blur.

但是,一旦用户登录,浏览器很可能会记住与用户电子邮件地址/登录相关联的密码.(哪个好,不应该被禁用.)

但是label,当浏览器#password自动设置字段上的值时,我会遇到触发滑出动画的问题,因为事件的结果既不是也不focus是blur.

当浏览器"自动填充"用户密码时,是否有人知道使用哪个监听器来运行我的功能？

以下是该问题的快速屏幕截图:

密码自动填充标签问题http://dl.dropbox.com/u/376243/fill_issue.png

Answer 1

我最近阅读了一篇名为" 捕获自动填充作为变更事件"的文章,这可能就是您正在寻找的内容.作者创建了一个名为listenForChange()监视字段以进行表单自动填充活动的函数(自动填充甚至一个单词？).由于它经常检查您的表单,我个人建议您只运行一定次数.毕竟表单自动填充通常会在页面加载完成后立即执行.

引用原始文章:

该插件使用了trigger()和data()函数.简而言之,我们遍历输入元素或子输入元素集,将其初始值存储在data()函数提供的数据高速缓存中.然后,我们检查存储的值是否与当前迭代期间的输入值匹配.如果是这样,我们什么都不做,如果没有,我们通过trigger()手动触发change事件.还有一些逻辑可以忽略具有焦点的元素.我们不需要担心这个元素,因为如果在用户有焦点时更改了值,则当元素模糊时,change事件将正常触发.

这是函数本身,因为你不想去阅读文章(你应该):

(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的所有者撰写文章.