如何判断浏览器是否已自动填充文本框?特别是用户名和密码框,自动填充页面加载。
我的第一个问题是,这在页面加载序列中什么时候发生?是在document.ready之前还是之后?
其次,我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生,只是挂钩到事件。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话,我很想看到一个jsfiddle显示你的答案。
可能重复
DOM事件浏览器密码自动填充?
浏览器自动填充和Javascript触发事件
这两个问题都没有真正解释什么事件被触发,它们只是不断地重新检查文本框(对性能不好!)
不幸的是,我发现唯一可靠的方法来检查这个跨浏览器是轮询输入。为了使它具有响应性,还需要侦听事件。
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);
});