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

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

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

if (autoFilled == true) {

} else {

}

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

可能重复

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

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

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


当前回答

我成功的chrome与:

    setTimeout(
       function(){
          $("#input_password").focus();
          $("#input_username").focus();
          console.log($("#input_username").val());
          console.log($("#input_password").val());
       }
    ,500);

其他回答

不幸的是,我发现唯一可靠的方法来检查这个跨浏览器是轮询输入。为了使它具有响应性,还需要侦听事件。 Chrome已经开始隐藏javascript的自动填充值,这需要一个hack。

Poll every half to third of a second ( Does not need to be instant in most cases ) Trigger the change event using JQuery then do your logic in a function listening to the change event. Add a fix for Chrome hidden autofill password values. $(document).ready(function () { $('#inputID').change(YOURFUNCTIONNAME); $('#inputID').keypress(YOURFUNCTIONNAME); $('#inputID').keyup(YOURFUNCTIONNAME); $('#inputID').blur(YOURFUNCTIONNAME); $('#inputID').focusin(YOURFUNCTIONNAME); $('#inputID').focusout(YOURFUNCTIONNAME); $('#inputID').on('input', YOURFUNCTIONNAME); $('#inputID').on('textInput', YOURFUNCTIONNAME); $('#inputID').on('reset', YOURFUNCTIONNAME); window.setInterval(function() { var hasValue = $("#inputID").val().length > 0;//Normal if(!hasValue){ hasValue = $("#inputID:-webkit-autofill").length > 0;//Chrome } if (hasValue) { $('#inputID').trigger('change'); } }, 333); });

例如,为了检测电子邮件,我尝试了“on change”和突变观察者,但都不起作用。setInterval与LinkedIn自动填充一起工作得很好(不透露我所有的代码,但你知道的),如果你在这里添加额外的条件来降低AJAX的速度,它与后端一起工作得很好。如果表单字段没有变化,比如他们没有输入来编辑他们的电子邮件,lastEmail会阻止毫无意义的AJAX ping。

// lastEmail needs scope outside of setInterval for persistence.
var lastEmail = 'nobody';
window.setInterval(function() { // Auto-fill detection is hard.
    var theEmail = $("#email-input").val();
    if (
        ( theEmail.includes("@") ) &&
        ( theEmail != lastEmail )
    ) {
        lastEmail = theEmail;
        // Do some AJAX
    }
}, 1000); // Check the field every 1 second

我知道这是一个老话题,但我可以想象很多人来这里寻找解决方案。

要做到这一点,你可以检查输入(s)是否有值(s):

$(function() {
    setTimeout(function() {
        if ($("#inputID").val().length > 0) {
            // YOUR CODE
        }
    }, 100);
});

当我的登录表单被加载以启用提交按钮时,我自己就用它来检查登录表单中的值。 代码是为jQuery编写的,但是如果需要的话很容易更改。

如果有人正在寻找一个解决方案(就像我今天一样),来监听浏览器的自动填充更改,这里有一个我已经构建的自定义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!");
});

在2020年,这是我在chrome中工作的方法:

// wait 0.1 sec to execute action after detecting autofill
// check if input username is autofilled by browser
// enable "login" button for click to submit form
 $(window).on("load", function(){
       setTimeout(function(){

           if ($("#UserName").is("input:-webkit-autofill")) 
           $("#loginbtn").prop('disabled', false); 

      }, 100);
 });