如何判断浏览器是否已自动填充文本框?特别是用户名和密码框,自动填充页面加载。
我的第一个问题是,这在页面加载序列中什么时候发生?是在document.ready之前还是之后?
其次,我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生,只是挂钩到事件。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话,我很想看到一个jsfiddle显示你的答案。
可能重复
DOM事件浏览器密码自动填充?
浏览器自动填充和Javascript触发事件
这两个问题都没有真正解释什么事件被触发,它们只是不断地重新检查文本框(对性能不好!)
我也在找类似的东西。Chrome只有……在我的例子中,包装器div需要知道输入字段是否被自动填充。所以我可以给它额外的css就像Chrome在自动填充时对输入字段所做的那样。通过查看以上所有的答案,我的综合解决方案如下:
/*
* make a function to use it in multiple places
*/
var checkAutoFill = function(){
$('input:-webkit-autofill').each(function(){
$(this).closest('.input-wrapper').addClass('autofilled');
});
}
/*
* Put it on the 'input' event
* (happens on every change in an input field)
*/
$('html').on('input', function() {
$('.input-wrapper').removeClass('autofilled');
checkAutoFill();
});
/*
* trigger it also inside a timeOut event
* (happens after chrome auto-filled fields on page-load)
*/
setTimeout(function(){
checkAutoFill();
}, 0);
这个工作的html将是
<div class="input-wrapper">
<input type="text" name="firstname">
</div>
我也在找类似的东西。Chrome只有……在我的例子中,包装器div需要知道输入字段是否被自动填充。所以我可以给它额外的css就像Chrome在自动填充时对输入字段所做的那样。通过查看以上所有的答案,我的综合解决方案如下:
/*
* make a function to use it in multiple places
*/
var checkAutoFill = function(){
$('input:-webkit-autofill').each(function(){
$(this).closest('.input-wrapper').addClass('autofilled');
});
}
/*
* Put it on the 'input' event
* (happens on every change in an input field)
*/
$('html').on('input', function() {
$('.input-wrapper').removeClass('autofilled');
checkAutoFill();
});
/*
* trigger it also inside a timeOut event
* (happens after chrome auto-filled fields on page-load)
*/
setTimeout(function(){
checkAutoFill();
}, 0);
这个工作的html将是
<div class="input-wrapper">
<input type="text" name="firstname">
</div>
不幸的是,我发现唯一可靠的方法来检查这个跨浏览器是轮询输入。为了使它具有响应性,还需要侦听事件。
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);
});