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

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

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

if (autoFilled == true) {

} else {

}

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

可能重复

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

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

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


当前回答

除了其他答案,我喜欢添加这个帮助函数,它可以防止脚本错误,你可以使用例如在DOMContentLoaded或onload(与setTimeout >=500一起,因为有一些延迟,直到浏览器自动填充),在输入元素上的onchange或表单上的onsubmit:

function isAutofilled(element) {
  return [":autofill", ":-webkit-autofill", ":-moz-autofill"].some((selector) => {
    try {
      return element.matches(selector);
    } catch {
      return false;
    }
  });
}

其他回答

不幸的是,我发现唯一可靠的方法来检查这个跨浏览器是轮询输入。为了使它具有响应性,还需要侦听事件。 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); });

我遇到过同样的问题,我已经写出了这个解。

当页面加载时,它开始对每个输入字段进行轮询(我设置了10秒,但您可以调优这个值)。 10秒后,它将停止对每个输入字段的轮询,只对集中的输入(如果有的话)开始轮询。 当你模糊输入时,它会停止,如果你聚焦一个,它又会开始。

通过这种方式,您只在真正需要时轮询,并且只对有效输入进行轮询。

// This part of code will detect autofill when the page is loading (username and password inputs for example)
var loading = setInterval(function() {
    $("input").each(function() {
        if ($(this).val() !== $(this).attr("value")) {
            $(this).trigger("change");
        }
    });
}, 100);
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
setTimeout(function() {
    clearInterval(loading);
}, 10000);
// Now we just listen on the focused inputs (because user can select from the autofill dropdown only when the input has focus)
var focused;
$(document)
.on("focus", "input", function() {
    var $this = $(this);
    focused = setInterval(function() {
        if ($this.val() !== $this.attr("value")) {
            $this.trigger("change");
        }
    }, 100);
})
.on("blur", "input", function() {
    clearInterval(focused);
});

当自动插入多个值时,它的工作效果不太好,但可以对它进行调整,查找当前表单上的每个输入。

喜欢的东西:

// This part of code will detect autofill when the page is loading (username and password inputs for example)
var loading = setInterval(function() {
    $("input").each(function() {
        if ($(this).val() !== $(this).attr("value")) {
            $(this).trigger("change");
        }
    });
}, 100);
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
setTimeout(function() {
    clearInterval(loading);
}, 10000);
// Now we just listen on inputs of the focused form
var focused;
$(document)
.on("focus", "input", function() {
    var $inputs = $(this).parents("form").find("input");
    focused = setInterval(function() {
        $inputs.each(function() {
            if ($(this).val() !== $(this).attr("value")) {
                $(this).trigger("change");
            }
        });
    }, 100);
})
.on("blur", "input", function() {
    clearInterval(focused);
});

我在用户名上使用了blur事件来检查pwd字段是否已被自动填充。

 $('#userNameTextBox').blur(function () {
        if ($('#userNameTextBox').val() == "") {
            $('#userNameTextBox').val("User Name");
        }
        if ($('#passwordTextBox').val() != "") {
            $('#passwordTextBoxClear').hide(); // textbox with "Password" text in it
            $('#passwordTextBox').show();
        }
    });

这适用于IE,应该适用于所有其他浏览器(我只检查了IE)

我的解决方案:

像往常一样监听更改事件,并在DOM内容加载上执行以下操作:

setTimeout(function() {
    $('input').each(function() {
        var elem = $(this);
        if (elem.val()) elem.change();
    })
}, 250);

这将在用户有机会编辑所有非空字段之前触发更改事件。

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

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