检测浏览器自动填充
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了检测浏览器自动填充相关的知识，希望对你有一定的参考价值。
如何判断浏览器是否自动填充了文本框？特别是使用自动填充页面加载的用户名和密码框。
我的第一个问题是在页面加载序列中何时发生这种情况？是在document.ready之前还是之后？
其次，我如何使用逻辑来确定是否发生这种情况？它不是我想阻止这种情况发生，只是挂钩事件。最好是这样的：
if (autoFilled == true) {
} else {
}
如果可能的话，我很乐意看到一个jsfiddle显示你的答案。
可能重复
DOM event for browser password autofill?
Browser Autofill and Javascript triggered events
- 这些问题并没有真正解释触发了什么事件，他们只是不断重新检查文本框（不利于性能！）。
答案
问题是自动填充由不同的浏览器以不同的方式处理。有些人发送变更事件，有些则没有。因此，几乎不可能挂钩浏览器自动填充输入字段时触发的事件。
- 更改不同浏览器的事件触发器： 对于用户名/密码字段： Firefox 4，IE 7和IE 8不会发送更改事件。 Safari 5和Chrome 9会发送更改事件。 对于其他表单字段： IE 7和IE 8不会发送更改事件。 当用户从字段中的建议列表和选项卡中选择一个值时，Firefox 4会调度更改更改事件。 Chrome 9不会发送更改事件。 Safari 5会调度change事件。
您最好的选择是在表单中使用autocomplete="off"禁用表单的自动填充，或者定期轮询以查看其是否已填充。
关于它是否在document.ready之前或之前填写的问题，它在浏览器之间甚至版本之间都有所不同。仅对于用户名/密码字段，仅在您选择用户名时填写密码字段。因此，如果您尝试附加到任何事件，您将会有一个非常混乱的代码。
你可以对这个HERE有一个很好的阅读
另一答案
我在寻找类似的东西。仅限Chrome ...在我的情况下，包装器div需要知道输入字段是否已自动填充。因此，当Chrome自动填充时，我可以像输入字段那样给它额外的CSS。通过查看上面的所有答案，我的综合解决方案如下：
/*
* 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>
另一答案
我也遇到了同样的问题，标签没有检测到自动填充，并且在填充文本上移动标签的动画是重叠的，这个解决方案对我有用。
input:-webkit-autofill ~ label {
top:-20px;
}
另一答案
我有这个问题的完美解决方案尝试此代码片段。 Demo is here
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>另一答案
在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"))
另一答案
我知道这是一个老线程，但我可以想象很多人来找到解决方案。
为此，您可以检查输入是否具有以下值：
$(function() {
setTimeout(function() {
if ($("#inputID").val().length > 0) {
// YOUR CODE
}
}, 100);
});
我自己使用它来检查我的登录表单中的值，当它被
以上是关于检测浏览器自动填充的主要内容，如果未能解决你的问题，请参考以下文章