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

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

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

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

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

当浏览器“自动填写”用户密码时,是否有人知道使用哪个监听器来运行我的function?

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

密码自动填充标签问题http://sofzh.miximages.com/jquery/fill_issue.png

我最近阅读了一篇名为“ 捕获自动填充作为变更事件”的文章,这可能就是您正在寻找的内容。 作者创建了一个名为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的所有者撰写文章。

你也应该让听众改变:

 $('#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(); }