如何判断浏览器是否已自动填充文本框?特别是用户名和密码框,自动填充页面加载。

我的第一个问题是,这在页面加载序列中什么时候发生?是在document.ready之前还是之后?

其次,我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生,只是挂钩到事件。最好是这样的:

if (autoFilled == true) {

} else {

}

如果可能的话,我很想看到一个jsfiddle显示你的答案。

可能重复

DOM事件浏览器密码自动填充?

浏览器自动填充和Javascript触发事件

这两个问题都没有真正解释什么事件被触发,它们只是不断地重新检查文本框(对性能不好!)


当前回答

我花了几个小时解决的问题,检测自动填充输入在第一页加载(没有任何用户采取行动),并发现理想的解决方案,工作在Chrome, Opera,边缘和FF太!!

在Chrome, Opera,边缘问题解决得相当EZ

通过搜索带有伪类输入的元素:-webkit-autofill并执行所需的操作(在我的例子中,我更改输入包装器类以使用浮动标签模式更改标签位置)。

问题出在Firefox上

因为FF没有这样的伪类或类似的类(正如许多人建议的“:-moz-autofill”),可以通过简单地搜索DOM来查看。你也找不到输入的黄色背景。唯一的原因是浏览器通过改变过滤器属性添加了这个黄色:

输入:-moz-autofill,输入:-moz-autofill-preview{过滤器:灰度(21%)亮度(88%)对比度(161%)反转(10%)黑褐色(40%)饱和(206%);}

所以在Firefox的情况下,你必须首先搜索所有的输入,并得到它的计算风格,然后比较这个过滤器风格硬编码在浏览器设置。我真的不知道为什么他们不用简单的背景色,而是用那个奇怪的滤镜!?他们让生活更艰难了;)

下面是我的代码在我的网站(https://my.oodo.pl/en/modules/register/login.php):)上工作时的魅力

<script type="text/javascript">
/* 
 * this is my main function
 */
var checkAutoFill = function(){
    /*first we detect if we have FF or other browsers*/
    var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
    if (!isFirefox) {
        $('input:-webkit-autofill').each(function(){
        /*here i have code that adds "focused" class to my input wrapper and changes 
        info instatus div. U can do what u want*/
        $(this).closest('.field-wrapper').addClass('focused');
        document.getElementById("status").innerHTML = "Your browser autofilled form";
        });
    }
    if (isFirefox) {
        $('input').each(function(){
        var bckgrnd = window.getComputedStyle(document.getElementById(this.id), null).getPropertyValue("background-image");
        if (bckgrnd === 'linear-gradient(rgba(255, 249, 145, 0.5), rgba(255, 249, 145, 0.5))') {
        /*if our input has that filter property customized by browserr with yellow background i do as above (change input wrapper class and change status info. U can add your code here)*/
        $(this).closest('.field-wrapper').addClass('focused');
        document.getElementById("status").innerHTML = "Your Browser autofilled form";
        }
        })
    }
}
/*im runing that function at load time and two times more at 0.5s and 1s delay because not all browsers apply that style imediately (Opera does after ~300ms and so Edge, Chrome is fastest and do it at first function run)*/
checkAutoFill();
setTimeout(function(){ 
checkAutoFill();
}, 500);
setTimeout(function(){ 
checkAutoFill();
}, 1000);
})
</script>

我手动编辑了上面的代码,把一些对你不重要的垃圾扔出去。如果它不为你工作,比粘贴到你的IDE和双重检查语法;)当然,添加一些调试警报或控制台日志并进行自定义。

其他回答

对于谷歌chrome自动完成,这为我工作:

if ($("#textbox").is(":-webkit-autofill")) 
{    
    // the value in the input field of the form was filled in with google chrome autocomplete
}

似乎有一个解决方案,不依赖轮询(至少Chrome)。它几乎是一样的粗鄙,但我确实认为比全球民意调查好一点。

考虑以下场景:

用户开始填写字段1 用户选择一个自动完成建议,自动填充field2和field3

解决方案:在所有字段上注册一个onblur,通过下面的jQuery片段$(':-webkit-autofill')检查自动填充字段的存在

这不会是立即的,因为它会延迟到用户模糊field1,但它不依赖于全局轮询,所以在我看来,这是一个更好的解决方案。

也就是说,由于按回车键可以提交表单,您可能还需要相应的onkeypress处理程序。

或者,你可以使用全局轮询来检查$(':-webkit-autofill')

我有这个问题的完美解决方案,试试这个代码片段。 演示在这里

function ModernForm() { var modernInputElement = $('.js_modern_input'); function recheckAllInput() { modernInputElement.each(function() { if ($(this).val() !== '') { $(this).parent().find('label').addClass('focus'); } }); } modernInputElement.on('click', function() { $(this).parent().find('label').addClass('focus'); }); modernInputElement.on('blur', function() { if ($(this).val() === '') { $(this).parent().find('label').removeClass('focus'); } else { recheckAllInput(); } }); } ModernForm(); .form_sec { padding: 30px; } .form_sec .form_input_wrap { position: relative; } .form_sec .form_input_wrap label { position: absolute; top: 25px; left: 15px; font-size: 16px; font-weight: 600; z-index: 1; color: #333; -webkit-transition: all ease-in-out 0.35s; -moz-transition: all ease-in-out 0.35s; -ms-transition: all ease-in-out 0.35s; -o-transition: all ease-in-out 0.35s; transition: all ease-in-out 0.35s; } .form_sec .form_input_wrap label.focus { top: 5px; color: #a7a9ab; font-weight: 300; -webkit-transition: all ease-in-out 0.35s; -moz-transition: all ease-in-out 0.35s; -ms-transition: all ease-in-out 0.35s; -o-transition: all ease-in-out 0.35s; transition: all ease-in-out 0.35s; } .form_sec .form_input { width: 100%; font-size: 16px; font-weight: 600; color: #333; border: none; border-bottom: 2px solid #d3d4d5; padding: 30px 0 5px 0; outline: none; } .form_sec .form_input.err { border-bottom-color: #888; } .form_sec .cta_login { border: 1px solid #ec1940; border-radius: 2px; background-color: #ec1940; font-size: 14px; font-weight: 500; text-align: center; color: #ffffff; padding: 15px 40px; margin-top: 30px; display: inline-block; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form class="form_sec"> <div class="row clearfix"> <div class="form-group col-lg-6 col-md-6 form_input_wrap"> <label> Full Name </label> <input type="text" name="name" id="name" class="form_input js_modern_input"> </div> </div> <div class="row clearfix"> <div class="form-group form_input_wrap col-lg-6 col-md-6"> <label> Emaill </label> <input type="email" name="email" class="form_input js_modern_input"> </div> </div> <div class="row clearfix"> <div class="form-group form_input_wrap col-lg-12 col-md-12"> <label> Address Line 1 </label> <input type="text" name="address" class="form_input js_modern_input"> </div> </div> <div class="row clearfix"> <div class="form-group col-lg-6 col-md-6 form_input_wrap"> <label> City </label> <input type="text" name="city" class="form_input js_modern_input"> </div> <div class="form-group col-lg-6 col-md-6 form_input_wrap"> <label> State </label> <input type="text" name="state" class="form_input js_modern_input"> </div> </div> <div class="row clearfix"> <div class="form-group col-lg-6 col-md-6 form_input_wrap"> <label> Country </label> <input type="text" name="country" class="form_input js_modern_input"> </div> <div class="form-group col-lg-4 col-md-4 form_input_wrap"> <label> Pin </label> <input type="text" name="pincode" class="form_input js_modern_input"> </div> </div> <div class="row cta_sec"> <div class="col-lg-12"> <button type="submit" class="cta_login">Submit</button> </div> </div> </form>

如果有人正在寻找一个解决方案(就像我今天一样),来监听浏览器的自动填充更改,这里有一个我已经构建的自定义jquery方法,只是为了简化向输入添加更改侦听器的过程:

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

你可以这样调用它:

$("#myInput").allchange(function () {
    alert("change!");
});

在CSS中尝试

输入:-webkit-autofill { border-color: #9B9FC4 ! }