如何判断浏览器是否已自动填充文本框?特别是用户名和密码框，自动填充页面加载。
我的第一个问题是，这在页面加载序列中什么时候发生?是在document.ready之前还是之后?
其次，我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生，只是挂钩到事件。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话，我很想看到一个jsfiddle显示你的答案。
可能重复
DOM事件浏览器密码自动填充?
浏览器自动填充和Javascript触发事件
这两个问题都没有真正解释什么事件被触发，它们只是不断地重新检查文本框(对性能不好!)
当前回答
似乎有一个解决方案，不依赖轮询(至少Chrome)。它几乎是一样的粗鄙，但我确实认为比全球民意调查好一点。
考虑以下场景:
用户开始填写字段1 用户选择一个自动完成建议，自动填充field2和field3
解决方案:在所有字段上注册一个onblur，通过下面的jQuery片段$(':-webkit-autofill')检查自动填充字段的存在
这不会是立即的，因为它会延迟到用户模糊field1，但它不依赖于全局轮询，所以在我看来，这是一个更好的解决方案。
也就是说，由于按回车键可以提交表单，您可能还需要相应的onkeypress处理程序。
或者，你可以使用全局轮询来检查$(':-webkit-autofill')
其他回答
例如，为了检测电子邮件，我尝试了“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
不幸的是，我发现唯一可靠的方法来检查这个跨浏览器是轮询输入。为了使它具有响应性，还需要侦听事件。 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); });
在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);
});
我很难发现Firefox中的自动填充功能。这是对我有效的唯一解决方案:
Demo
HTML:
<div class="inputFields">
<div class="f_o">
<div class="field_set">
<label class="phold">User</label>
<input type="tel" class="form_field " autocomplete="off" value="" maxlength="50">
</div>
</div>
<div class="f_o">
<div class="field_set">
<label class="phold">Password</label>
<input type="password" class="form_field " autocomplete="off" value="" maxlength="50">
</div>
</div>
</div>
CSS:
/* Detect autofill for Chrome */
.inputFields input:-webkit-autofill {
animation-name: onAutoFillStart;
transition: background-color 50000s ease-in-out 0s;
}
.inputFields input:not(:-webkit-autofill) {
animation-name: onAutoFillCancel;
}
@keyframes onAutoFillStart {
}
@keyframes onAutoFillCancel {
}
.inputFields {
max-width: 414px;
}
.field_set .phold{
display: inline-block;
position: absolute;
font-size: 14px;
color: #848484;
-webkit-transform: translate3d(0,8px,0);
-ms-transform: translate3d(0,8px,0);
transform: translate3d(0,8px,0);
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
background-color: transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
margin-left: 8px;
z-index: 1;
left: 0;
pointer-events: none;
}
.field_set .phold_active {
font-size: 12px;
-webkit-transform: translate3d(0,-8px,0);
-ms-transform: translate3d(0,-8px,0);
transform: translate3d(0,-8px,0);
background-color: #FFF;
padding-left: 3px;
padding-right: 3px;
}
.field_set input[type='text'], .field_set select, .field_set input[type='tel'], .field_set input[type='password'] {
height: 36px;
}
.field_set input[type='text'], .field_set input[type='tel'], .field_set input[type='password'], .field_set select, .field_set textarea {
box-sizing: border-box;
width: 100%;
padding: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #ababab;
border-radius: 0;
}
.field_set {
margin-bottom: 10px;
position: relative;
}
.inputFields .f_o {
width: 100%;
line-height: 1.42857143;
float: none;
}
JavaScript:
// detect auto-fill when page is loading
$(window).on('load', function() {
// for sign in forms when the user name and password are filled by browser
getAutofill('.inputFields');
});
function getAutofill(parentClass) {
if ($(parentClass + ' .form_field').length > 0) {
var formInput = $(parentClass + ' .form_field');
formInput.each(function(){
// for Chrome: $(this).css('animation-name') == 'onAutoFillStart'
// for Firefox: $(this).val() != ''
if ($(this).css('animation-name') == 'onAutoFillStart' || $(this).val() != '') {
$(this).siblings('.phold').addClass('phold_active');
} else {
$(this).siblings('.phold').removeClass('phold_active');
}
});
}
}
$(document).ready(function(){
$(document).on('click','.phold',function(){
$(this).siblings('input, textarea').focus();
});
$(document).on('focus','.form_field', function(){
$(this).siblings('.phold').addClass('phold_active');
});
// blur for Chrome and change for Firefox
$(document).on('blur change','.form_field', function(){
var $this = $(this);
if ($this.val().length == 0) {
$(this).siblings('.phold').removeClass('phold_active');
} else {
$(this).siblings('.phold').addClass('phold_active');
}
});
// case when form is reloaded due to errors
if ($('.form_field').length > 0) {
var formInput = $('.form_field');
formInput.each(function(){
if ($(this).val() != '') {
$(this).siblings('.phold').addClass('phold_active');
} else {
$(this).siblings('.phold').removeClass('phold_active');
}
});
}
});
对于Chrome浏览器，我使用:if ($(this).css('animation-name') == 'onAutoFillStart')
对于Firefox: if ($(this).val() != ")
这里有一个技巧来理解浏览器是否填充输入(布尔):
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就可以使用了。您可以检测浏览器是否发生了自动填充。
