如何判断浏览器是否已自动填充文本框?特别是用户名和密码框，自动填充页面加载。
我的第一个问题是，这在页面加载序列中什么时候发生?是在document.ready之前还是之后?
其次，我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生，只是挂钩到事件。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话，我很想看到一个jsfiddle显示你的答案。
可能重复
DOM事件浏览器密码自动填充?
浏览器自动填充和Javascript触发事件
这两个问题都没有真正解释什么事件被触发，它们只是不断地重新检查文本框(对性能不好!)
当前回答
我在最新的Firefox、Chrome和Edge浏览器上都能使用这种方法:
$('#email').on('blur input', function() {
....
});
其他回答
似乎有一个解决方案，不依赖轮询(至少Chrome)。它几乎是一样的粗鄙，但我确实认为比全球民意调查好一点。
考虑以下场景:
用户开始填写字段1 用户选择一个自动完成建议，自动填充field2和field3
解决方案:在所有字段上注册一个onblur，通过下面的jQuery片段$(':-webkit-autofill')检查自动填充字段的存在
这不会是立即的，因为它会延迟到用户模糊field1，但它不依赖于全局轮询，所以在我看来，这是一个更好的解决方案。
也就是说，由于按回车键可以提交表单，您可能还需要相应的onkeypress处理程序。
或者，你可以使用全局轮询来检查$(':-webkit-autofill')
我的解决方案是:
$.fn.onAutoFillEvent = function (callback) {
var el = $(this),
lastText = "",
maxCheckCount = 10,
checkCount = 0;
(function infunc() {
var text = el.val();
if (text != lastText) {
lastText = text;
callback(el);
}
if (checkCount > maxCheckCount) {
return false;
}
checkCount++;
setTimeout(infunc, 100);
}());
};
$(".group > input").each(function (i, element) {
var el = $(element);
el.onAutoFillEvent(
function () {
el.addClass('used');
}
);
});
您可以尝试检测并清除所有自动填充
var autofillclear = false;
setInterval(function() {
if ($("input:-webkit-autofill") && autofillclear == false) {
$("input:-webkit-autofill").each(function() {
if ($(this).val() != '') {
$(this).val('');
autofillclear = true;
}
});
}
}, 500);
这里有一个技巧来理解浏览器是否填充输入(布尔):
const inputEl = inputRef.current; // select the el with any way, here is ReactJs ref
let hasValue;
try {
hasValue = inputRef.current.matches(':autofill');
} catch (err) {
try {
hasValue = inputRef.current.matches(':-webkit-autofill');
} catch (er) {
hasValue = false;
}
}
// hasValue (boolean) is ready
在最后一个大括号之后，hasValue就可以使用了。您可以检测浏览器是否发生了自动填充。
这是一个解决方案的浏览器与webkit渲染引擎。 当表单被自动填充时，输入将获得伪类:-webkit-autofill- (f.e. input:-webkit-autofill{…})。这是你必须通过JavaScript检查的标识符。
带有某种测试形式的解:
<form action="#" method="POST" class="js-filled_check">
<fieldset>
<label for="test_username">Test username:</label>
<input type="text" id="test_username" name="test_username" value="">
<label for="test_password">Test password:</label>
<input type="password" id="test_password" name="test_password" value="">
<button type="submit" name="test_submit">Test submit</button>
</fieldset>
</form>
和javascript:
$(document).ready(function() {
setTimeout(function() {
$(".js-filled_check input:not([type=submit])").each(function (i, element) {
var el = $(this),
autofilled = (el.is("*:-webkit-autofill")) ? el.addClass('auto_filled') : false;
console.log("element: " + el.attr("id") + " // " + "autofilled: " + (el.is("*:-webkit-autofill")));
});
}, 200);
});
页面加载时的问题是获取密码值，甚至长度。这是因为浏览器的安全性。还有超时，这是因为浏览器会在一段时间序列后填充表单。
这段代码将把类auto_filled添加到填充的输入中。此外，我尝试检查输入类型的密码值或长度，但它只是在页面上发生的一些事件后工作。所以我试图触发一些事件，但没有成功。现在这是我的解。 享受吧!
