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/ （目前开发中）
我有一些花哨的标签动画滑动的东西和缩小焦点＆安培; 模糊。

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口令字段将自动为这个事件既不是焦点也不模糊。

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:

推荐答案

最近，我读所谓的获取自动填充为更改事件的，只是可能是你在找什么。笔者创建了一个称为函数 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.

引用原来的文章：

的插件利用触发器（）和数据（）函数。简而言之，
  我们循环输入元素或集合
  孩子的输入单元，存储
  在数据高速缓存其初始值
  提供的数据（）函数。我们
  然后检查如果保存的值
  在输入过程中的值相匹配
  当前迭代。如果是这样，我们做
  什么都没有，如果没有，我们手动火
  通过改变触发事件（）。有
  也有一些逻辑忽略
  具有焦点的元素。我们不
  需要担心这个元素，
  因为如果值被改变而
  用户有重点，更改事件
  将被解雇正常时
  元素是模糊的。的

和这里的函数本身柜面你不想去阅读文章（你应该）：

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