如果浏览器自动填充输入字段,则调用函数

时间:2017-04-05 18:27:10

标签: javascript jquery html autocomplete callback

我试图调用一个检测浏览器是否已自动填充字段的函数,如果是,则向其中添加一个类。

我找到了一个解决方案部分工作的线程:https://stackoverflow.com/a/25393087

这是我对它的整合:

$.fn.allchange = function (callback) {
    var me = this;
    var last = "";
    var infunc = function () {
        var text = $(me).val();
        if (text != last) {
            last = text;
            callback();
        }
        setTimeout(infunc, 10);
    }
    setTimeout(infunc, 10);
};

$(".input").allchange(function () {
    $('.input').addClass('not--empty');
});

我遇到的问题是我还有一个函数可以检查模糊输入的变化,并为该输入添加一个类。但是,上述功能会将其添加到' .input'的所有实例中。

我认为解决方案是仅在自动填充元素上调用该函数,但是当我运行下面的函数时,它不起作用:

$(".input").allchange(function () {
    $(this).addClass('not--empty');
});

任何想法如何使这个工作?

编辑:我想添加一张图片来澄清我所指的内容:

enter image description here

1 个答案:

答案 0 :(得分:0)

所以这实际上是一个非常简单的解决方案 - 它可能不适用于所有浏览器,但它最适合Chrome / Firefox / Safari最新版本,对于这个应用程序来说很好。

setTimeout(function() {
    $('.input:-webkit-autofill').each(function() {
        var elem = $(this);
        $(elem).addClass('not--empty');
    })
},100);