我的第一个问题是页面加载序列何时发生?是在document.ready之前还是之后?
其次,我如何使用逻辑来确定是否发生了这种情况?它不是我想阻止这种情况发生,只是挂接到事件中。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话,我希望看到一个显示您答案的jsfiddle。
可能的重复
用于浏览器密码自动填充的DOM事件?
浏览器自动填充和JavaScript触发的事件
-这两个问题都不能真正解释触发了什么事件,它们只是不断地重新检查文本框(不利于性能!)。
#1 楼
问题是自动填充由不同的浏览器进行不同的处理。有些派遣变更事件,有些则没有。因此,几乎不可能挂接在浏览器自动完成输入字段时触发的事件。更改不同浏览器的事件触发器:
对于用户名/密码字段:
Firefox 4,IE 7和IE 8不会调度change事件。
Safari 5和Chrome 9会调度更改事件。
对于其他表单字段:
IE 7和IE 8不会调度更改事件。
当用户从建议列表中选择一个值并在字段外选择选项卡时,Firefox 4会调度更改事件。
Chrome 9不会调度更改事件。
Safari 5确实调度了更改事件。
您最好的选择是在表单中使用
autocomplete="off"
禁用表单的自动完成功能,或者定期轮询以查看其是否已填充。关于您是否在文档上填充或在文档之前填充的问题。甚至版本之间。对于用户名/密码字段,仅当您选择用户名时才填写密码字段。因此,如果您尝试附加到任何事件,总的来说,您将得到一个非常混乱的代码。
您可以在此很好地阅读
评论
请注意,自动完成和自动填充之间是有区别的。 OP特别是指浏览器在页面加载时填写保存的登录详细信息。
–罗伯特
13年7月30日在12:45
常见的骇客行为是该页面某些重要部分上的杀手ter。当用户的鼠标头按下按钮或类似按钮时,将触发该事件。
–布莱斯
13年11月17日在8:35
@Bryce就我个人而言,我会遇到“模糊”事件,因为自动填充是在您输入输入区域之后发生的事情。显然,这并不理想,但作为上述浏览器的后备设备,它可能会非常有帮助
– JakeJ
14年6月27日在10:07
不要忘记输入事件。这就是Chrome在自动完成时触发的功能(如果Chrome具有自动填充功能,则可能会自动填充;我总是将其关闭)。
– T.J.拥挤者
2014年9月5日下午7:14
如果您只想知道文本框中的值是否由Google chrome自动填充功能填充,请查看我的第一行答案。
–ThdK
16年6月2日在9:08
#2 楼
WebKit浏览器的解决方案来自MDN文档的:-webkit-autofill CSS伪类:
:-webkit-autofill CSS伪类当元素的值由浏览器自动填充时匹配
我们可以在所需的
<input>
元素定义为:-webkit-autofill
以后,为其定义一个无效的过渡CSS规则。然后,JS将能够挂接到animationstart
事件。归功于Klarna UI团队。在此处查看其不错的实现:
CSS规则
JS挂钩
评论
到目前为止,这是最好的解决方案!为此,Lev倍感荣幸。感谢您分享Klarna UI的解决方案...在我找到这个之前,没有其他工作对我有用。救命!
–布雷登·罗克韦尔·纳皮尔
17年5月26日在23:44
除了CSS规则外,这里还需要关键帧github.com/klarna/ui/blob/v4.10.0/Field/styles.scss#L181-L189
–user1069816
18年1月7日在21:50
这对我来说完美无缺!需要稍微弄清楚它的确切方法。谢谢克拉纳团队
– pritesh
18年7月23日在20:52
#3 楼
这在最新的Firefox,Chrome和Edge中对我有效:$('#email').on('blur input', function() {
....
});
评论
“输入”!这对我来说是最简单的解决方案,但是我只测试了自动填充功能,而不是自动填充功能。
–GreenRaccoon23
16年6月17日在18:25
模糊对某些自动完成加载项不起作用
–探路者
16年8月28日在4:12
输入将在每次按键时触发。如果执行服务器调用,则可能会触发。
– RiZKiT
17年11月29日在9:56
很好的解决方案!此事件组合解决了用户填充和浏览器自动填充的问题。
–彼得·赫拉迪克(PetrHladík)
18年8月15日在8:12
#4 楼
我阅读了很多有关此问题的文章,并希望提供一种非常快速的解决方法来帮助我。let style = window.getComputedStyle(document.getElementById('email'))
if (style && style.backgroundColor !== inputBackgroundNormalState) {
this.inputAutofilledByBrowser = true
}
其中我模板的
inputBackgroundNormalState
是'rgb(255,255, 255)'。因此,基本上,当浏览器应用自动完成功能时,它们倾向于通过在输入上应用不同的(讨厌的)黄色来指示输入是自动填充的。
编辑:适用于所有浏览器
评论
好主意!
–moto
19年9月1日,0:11在
#5 楼
对于谷歌浏览器自动完成功能,这对我有用:if ($("#textbox").is(":-webkit-autofill"))
{
// the value in the input field of the form was filled in with google chrome autocomplete
}
评论
它也对我有用。我尝试了数百种解决方案,但没人能解决。非常感谢您,保存我的时间和我一直在寻找解决方案的所有时间。
–perozzo
18年7月6日在22:43
在其他浏览器上,此方法引发错误:“语法错误,无法识别的表达式:不支持的伪:-webkit-autofill”(我在Firefox上尝试过)
– anvita surapaneni
19年1月7日在21:30
在chrome上以及2020年都无法正常运行,还会引发错误无法识别的表达式:不支持的伪:-webkit-autofill
–狮子座
2月28日10:00
#6 楼
万一有人在寻找解决方案(就像我今天一样),以监听浏览器的自动填充更改,这是我构建的自定义jquery方法,目的是简化向输入添加更改侦听器时的过程: $.fn.allchange = function (callback) {
var me = this;
var last = "";
var infunc = function () {
var text = $(me).val();
if (text != last) {
last = text;
callback();
}
setTimeout(infunc, 100);
}
setTimeout(infunc, 100);
};
您可以这样称呼:
$("#myInput").allchange(function () {
alert("change!");
});
评论
出于某种原因,此代码不适用于页面重定向(当我注销应用程序并重定向到发生自动填充的登录页面时)。尽管确实可以刷新页面。
– VishwaKumar
2015年6月5日在6:38
看起来很像移动电池耗尽器:/
– Stefan Fisk
18年1月26日在15:49
@StefanFisk-并非如此。在浏览器页面的JS级别上设置一个简单的重复计时器不足以影响您的电池,因为大多数网页中发生的事情太多....您真的认为google.com没有设置重复计时器吗?如果我可以简单地用JS编程消耗用户电量的网页,那将是一个电源管理缺陷。
–LcSalazar
18年1月26日在16:45
#7 楼
在github上有一个新的polyfill组件可以解决这个问题。看看自动填充事件。只需安装凉亭并安装,自动填充即可按预期工作。bower install autofill-event
评论
这对jQuery Custom Forms非常有用。我刚刚将其放入,我的自定义选择列表与自动填充效果很好。
–克里斯·布鲁姆(Chris Bloom)
2014年6月9日14:13
#8 楼
不幸的是,我发现检查此跨浏览器的唯一可靠方法是轮询输入。为了使其响应,还可以监听事件。Chrome已开始从需要隐藏的javascript中隐藏自动填充值。
每半秒到三分之一秒进行一次轮询(在大多数情况下不需要立即进行)
使用JQuery触发更改事件,然后在侦听更改事件的函数中进行逻辑处理。
添加了针对Chrome隐藏的自动填充密码值的修复程序。
$(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);
});
#9 楼
我的解决方案:像往常一样收听
change
事件,并在DOM内容加载时执行以下操作:setTimeout(function() {
$('input').each(function() {
var elem = $(this);
if (elem.val()) elem.change();
})
}, 250);
这会触发用户有机会对其进行编辑之前,所有非空字段的更改事件。
评论
完善。我发现使用Chrome的第一个解决方案!
– Rid Iculous
2015年4月2日,下午1:47
确实,@ RidIculous一些解决方案可以多么简单。
–卡米洛·马丁(Camilo Martin)
15年4月2日在12:35
但是elem.val()对于chrome中的自动填充密码字段返回空字符串:(
–Hemant_Negi
15年7月16日在15:40
@Hemant_Negi Chrome是否仍未调度更改事件?如我错了请纠正我。我正在使用LastPass,并且懒得禁用它以查看它是否也可以工作。
–卡米洛·马丁(Camilo Martin)
15年7月26日在18:20
是chrome调度更改事件,但是,当我尝试检索该值时,它返回空值。
–Hemant_Negi
15年7月27日在7:50
#10 楼
我还遇到了相同的问题,即标签未检测到自动填充,并且在填充文本时移动标签的动画出现了重叠,因此该解决方案对我有用。input:-webkit-autofill ~ label {
top:-20px;
}
评论
这是有帮助的。
–rustyshackleford
19年5月9日在19:34
正是我需要的:)
– Dabrule
6月12日7:51
#11 楼
我在寻找类似的东西。仅适用于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>
#12 楼
我知道这是一个旧线程,但是我可以想象有很多人可以在这里找到解决方案。要执行此操作,可以使用以下命令检查输入是否具有值: br />
$(function() {
setTimeout(function() {
if ($("#inputID").val().length > 0) {
// YOUR CODE
}
}, 100);
});
我自己用它来检查我的登录表单中的值,该表单在加载时启用了提交按钮。
该代码是为jQuery编写的,但很简单根据需要进行更改。
评论
如果将第三行更新为($(“#inputID:-webkit-autofill”)。val()。length> 0){
–赫克托
16 Jan 26 '22:54
#13 楼
这是使用webkit渲染引擎的浏览器的解决方案。自动填充表单时,输入将为伪类:-webkit-autofill-(例如,输入:-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类添加到填充的输入中。另外,我尝试检查输入类型的密码值或长度,但是在页面上发生某些事件之后它才起作用。所以我试图触发一些事件,但是没有成功。现在,这是我的解决方案。
享受!
评论
这是最新的答案。
– Ben Racicot
19年3月13日在14:26
我尝试了此解决方案,并为我很好地工作。非常感谢你。
– Marcus Crisostomo
19年11月4日在22:18
#14 楼
对于这个问题,我有完美的解决方案,请尝试以下代码段。演示在这里 function ModernForm() {
var modernInputElement = $('.js_modern_input');
function recheckAllInput() {
modernInputElement.each(function() {
if ($(this).val() !== '') {
$(this).parent().find('label').addClass('focus');
}
});
}
modernInputElement.on('click', function() {
$(this).parent().find('label').addClass('focus');
});
modernInputElement.on('blur', function() {
if ($(this).val() === '') {
$(this).parent().find('label').removeClass('focus');
} else {
recheckAllInput();
}
});
}
ModernForm();
.form_sec {
padding: 30px;
}
.form_sec .form_input_wrap {
position: relative;
}
.form_sec .form_input_wrap label {
position: absolute;
top: 25px;
left: 15px;
font-size: 16px;
font-weight: 600;
z-index: 1;
color: #333;
-webkit-transition: all ease-in-out 0.35s;
-moz-transition: all ease-in-out 0.35s;
-ms-transition: all ease-in-out 0.35s;
-o-transition: all ease-in-out 0.35s;
transition: all ease-in-out 0.35s;
}
.form_sec .form_input_wrap label.focus {
top: 5px;
color: #a7a9ab;
font-weight: 300;
-webkit-transition: all ease-in-out 0.35s;
-moz-transition: all ease-in-out 0.35s;
-ms-transition: all ease-in-out 0.35s;
-o-transition: all ease-in-out 0.35s;
transition: all ease-in-out 0.35s;
}
.form_sec .form_input {
width: 100%;
font-size: 16px;
font-weight: 600;
color: #333;
border: none;
border-bottom: 2px solid #d3d4d5;
padding: 30px 0 5px 0;
outline: none;
}
.form_sec .form_input.err {
border-bottom-color: #888;
}
.form_sec .cta_login {
border: 1px solid #ec1940;
border-radius: 2px;
background-color: #ec1940;
font-size: 14px;
font-weight: 500;
text-align: center;
color: #ffffff;
padding: 15px 40px;
margin-top: 30px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="form_sec">
<div class="row clearfix">
<div class="form-group col-lg-6 col-md-6 form_input_wrap">
<label>
Full Name
</label>
<input type="text" name="name" id="name" class="form_input js_modern_input">
</div>
</div>
<div class="row clearfix">
<div class="form-group form_input_wrap col-lg-6 col-md-6">
<label>
Emaill
</label>
<input type="email" name="email" class="form_input js_modern_input">
</div>
</div>
<div class="row clearfix">
<div class="form-group form_input_wrap col-lg-12 col-md-12">
<label>
Address Line 1
</label>
<input type="text" name="address" class="form_input js_modern_input">
</div>
</div>
<div class="row clearfix">
<div class="form-group col-lg-6 col-md-6 form_input_wrap">
<label>
City
</label>
<input type="text" name="city" class="form_input js_modern_input">
</div>
<div class="form-group col-lg-6 col-md-6 form_input_wrap">
<label>
State
</label>
<input type="text" name="state" class="form_input js_modern_input">
</div>
</div>
<div class="row clearfix">
<div class="form-group col-lg-6 col-md-6 form_input_wrap">
<label>
Country
</label>
<input type="text" name="country" class="form_input js_modern_input">
</div>
<div class="form-group col-lg-4 col-md-4 form_input_wrap">
<label>
Pin
</label>
<input type="text" name="pincode" class="form_input js_modern_input">
</div>
</div>
<div class="row cta_sec">
<div class="col-lg-12">
<button type="submit" class="cta_login">Submit</button>
</div>
</div>
</form>
#15 楼
在chrome上,您可以通过为自动填充的元素设置特殊的CSS规则来检测自动填充字段,然后使用javascript检查元素是否应用了该规则。示例:
CSS
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px white inset;
}
JavaScript
let css = $("#selector").css("box-shadow")
if (css.match(/inset/))
console.log("autofilled:", $("#selector"))
#16 楼
这是来自Klarna UI团队的CSS解决方案。在此处查看其不错的实现资源。对我来说很好用。
input:-webkit-autofill {
animation-name: onAutoFillStart;
transition: background-color 50000s ease-in-out 0s;
}
input:not(:-webkit-autofill) {
animation-name: onAutoFillCancel;
}
#17 楼
我将这个解决方案用于相同的问题。HTML代码应更改为:
<input type="text" name="username" />
<input type="text" name="password" id="txt_password" />
jQuery代码应位于
document.ready
中:$('#txt_password').focus(function(){
$(this).attr('type','password');
});
#18 楼
在Chrome and Edge(2020)中,检查:-webkit-autofill
将告诉您输入已填充。但是,直到用户以某种方式与页面交互之前,您的JavaScript才能获取输入中的值。使用
$('x').focus()
和$('x').blur()
或在代码中触发鼠标事件都无济于事。请参阅https: //stackoverflow.com/a/35783761/32429
#19 楼
我在用户名上使用了模糊事件来检查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)
评论
@ChrisN我确实使用IE测试了我的解决方案,浏览器以不同的方式处理javascsript事件。我的解决方案简单易读,适合较难编码的浏览器之一。
–布里奇特·阿灵顿
15年7月8日在13:51
我最终得到了相同的解决方案:模糊事件。我为change和blur事件应用了相同的功能,效果很好。一个没有额外库的简单解决方案。
– Paulo Check
16年5月11日在17:47
#20 楼
我遇到了同样的问题,并且已经编写了此解决方案。页面加载时,它开始在每个输入字段上进行轮询(我设置了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);
});
#21 楼
如果您只想检测是否已使用自动填充,而不是确切地检测何时以及向哪个字段使用了自动填充,则只需添加一个将自动填充的隐藏元素,然后检查是否包含任何值。我知道这可能不是很多人感兴趣的内容。将输入字段的tabIndex设置为负,并且绝对坐标位于屏幕之外。输入与其余输入具有相同形式的一部分很重要。您必须使用将由自动填充选择的名称(例如“ secondname”)。var autofilldetect = document.createElement('input');
autofilldetect.style.position = 'absolute';
autofilldetect.style.top = '-100em';
autofilldetect.style.left = '-100em';
autofilldetect.type = 'text';
autofilldetect.name = 'secondname';
autofilldetect.tabIndex = '-1';
将此输入附加到表单上并检查其值表单提交。
#22 楼
确实有一种不依赖于轮询的解决方案(至少对于Chrome而言)。它几乎一样骇人听闻,但我确实认为它比全局轮询略胜一筹。请考虑以下情形:
用户开始填写field1
用户选择一个自动填充建议,该建议会自动填充field2和field3
解决方案:通过以下jQuery代码段$ {':-webkit-在所有字段上注册一个onblur,以检查是否存在自动填充的字段autofill')
这不会立即生效,因为它将被延迟到用户模糊field1为止,但是它不依赖于全局轮询,因此IMO,这是一个更好的解决方案。
也就是说,由于按下Enter键可以提交表单,因此您可能还需要onkeypress的相应处理程序。
或者,您可以使用全局轮询来检查$(':-webkit-自动填充')
#23 楼
根据我的个人经验,下面的代码与Firefox和safari兼容,但在chrome中选择自动完成功能效果不佳。function check(){
clearTimeout(timeObj);
timeObj = setTimeout(function(){
if($('#email').val()){
//do something
}
},1500);
}
$('#email').bind('focus change blur',function(){
check();
});
下面的代码效果更好,因为它将在用户单击输入字段时每次触发,然后您可以从中检查输入字段是否为空。
$('#email').bind('click', function(){
check();
});
#24 楼
我在chrome上成功实现了: setTimeout(
function(){
$("#input_password").focus();
$("#input_username").focus();
console.log($("#input_username").val());
console.log($("#input_password").val());
}
,500);
评论
不确定确切的Chrome自动填充何时运行,而是在$('input,select')。on('focusin',function(evt){...})中运行;我已经收到所有字段的自动填充值。
– Mirek
7月15日晚上11:59
可能是新版本?
– Antoine O
7月15日13:56
#25 楼
我的解决方案是: $.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');
}
);
});
评论
解决方案的说明将有所帮助
–吨
18年8月20日在5:41
我认为很明显。因此,基本上的想法是检查输入字段的值两次。在当前的实现中,它是10次,延迟为100毫秒。因此,在第二个10 * 1000 = 1sec浏览器中填充自动填充值时,将调用传递给自动填充的回调。在当前示例中,它仅添加了一个类。如果您还有其他问题,请随时提出:)。
–罗密克
18年8月23日在8:19
#26 楼
经过研究,问题在于webkit浏览器不会在自动完成时触发更改事件。我的解决方案是获取webkit添加的autofill类并自己触发更改事件。setTimeout(function() {
if($('input:-webkit-autofill').length > 0) {
//do some stuff
}
},300)
这里是铬问题的链接。 https://bugs.chromium.org/p/chromium/issues/detail?id=636425
#27 楼
我很难检测Firefox中的自动填充。这是唯一对我有用的解决方案:演示
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() != '')
#28 楼
我花了几个小时解决了在首页加载时检测自动填充输入的问题(无需采取任何用户操作),并找到了理想的解决方案,该解决方案也可以在Chrome,Opera,Edge和FF上使用!在Chrome,Opera,Edge上通过使用伪类
input:-webkit-autofill
搜索元素并执行所需的操作(在我的情况下,我正在更改输入包装器类以更改带有浮动标签图案的标签位置)解决了EZ 问题。
问题出在Firefox
因为FF没有这样的伪类或类似的类(很多人建议使用“:-moz-autofill”),因此仅通过搜索DOM就可以看到它们。您也找不到输入的黄色背景。唯一的原因是浏览器通过更改过滤器属性来添加黄色:
input:-moz-autofill, input:-moz-autofill-preview { filter: grayscale(21%) brightness(88%) contrast(161%) invert(10%) sepia(40%) saturate(206%); }
因此,对于Firefox,您必须首先搜索所有输入并获取其计算样式,然后将其与在浏览器中硬编码的此过滤器样式进行比较设置。我真的不知道为什么他们不只使用背景色,而是那种奇怪的滤镜!?它们使生活变得更加艰苦;)
这是我的代码在我的网站(https://my.oodo.pl/zh-CN/modules/register/login.php)上的魅力所在:
<script type="text/javascript">
/*
* this is my main function
*/
var checkAutoFill = function(){
/*first we detect if we have FF or other browsers*/
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if (!isFirefox) {
$('input:-webkit-autofill').each(function(){
/*here i have code that adds "focused" class to my input wrapper and changes
info instatus div. U can do what u want*/
$(this).closest('.field-wrapper').addClass('focused');
document.getElementById("status").innerHTML = "Your browser autofilled form";
});
}
if (isFirefox) {
$('input').each(function(){
var bckgrnd = window.getComputedStyle(document.getElementById(this.id), null).getPropertyValue("filter");
if (bckgrnd === 'grayscale(0.21) brightness(0.88) contrast(1.61) invert(0.1) sepia(0.4) saturate(2.06)') {
/*if our input has that filter property customized by browserr with yellow background i do as above (change input wrapper class and change status info. U can add your code here)*/
$(this).closest('.field-wrapper').addClass('focused');
document.getElementById("status").innerHTML = "Your Browser autofilled form";
}
})
}
}
/*im runing that function at load time and two times more at 0.5s and 1s delay because not all browsers apply that style imediately (Opera does after ~300ms and so Edge, Chrome is fastest and do it at first function run)*/
checkAutoFill();
setTimeout(function(){
checkAutoFill();
}, 500);
setTimeout(function(){
checkAutoFill();
}, 1000);
})
</script>
我在此处手动编辑了上面的代码,以扔掉一些对您不重要的垃圾。如果它不适用于您,则将其粘贴到您的IDE中并仔细检查语法;)当然,添加一些调试警报或控制台日志并进行自定义。
#29 楼
对于任何正在寻找2020年纯JS解决方案来检测自动填充的人,请继续。请原谅制表符错误,不能让它很好地放在SO上
//Chose the element you want to select - in this case input
var autofill = document.getElementsByTagName('input');
for (var i = 0; i < autofill.length; i++) {
//Wrap this in a try/catch because non webkit browsers will log errors on this pseudo element
try{
if (autofill[i].matches(':-webkit-autofill')) {
//Do whatever you like with each autofilled element
}
}
catch(error){
return(false);
}
}
#30 楼
在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);
});
评论
检查需要几微秒,而间隔将每隔100毫秒左右触发一次检查...这将完全影响性能吗?如果存在浏览器触发的事件,我确定他们会使用它。我明白了你的意思,但这取决于我问题的第一部分,即JavaScript是否甚至意识到刚刚发生了更改(例如,在document.ready之前)
Chrome / WebKit的最佳解决方案是使用DOM选择器:document.querySelectorAll('input:-webkit-autofill');短暂延迟后setTimeout(...这里的代码... 250);
基本上,我想自动登录用户,如果它是自动填充的,那么当它自动注销时,恼人的ot重新登录。
@ChrisN您的评论实际上是为我提供了一个(简单的)解决方案。不过,我不认为这是答案!将其发布为一个并ping通我,以便在感谢中投票。