如何判断浏览器是否自动填充了文本框？尤其是在页面加载时自动填充的用户名和密码框。
我的第一个问题是这在页面加载序列中何时发生？是在 document.ready 之前还是之后？
其次，我如何使用逻辑来确定是否发生了这种情况？不是我想阻止这种情况发生，只是加入事件。最好是这样的：
if (autoFilled == true) {
} else {
}
如果可能的话，我希望看到一个 jsfiddle 显示您的答案。
可能的重复
--这两个问题都没有真正解释触发了什么事件，它们只是不断地重新检查文本框（对性能不利！）。
问题是不同浏览器对自动填充的处理方式不同。有些发送更改事件，有些则不发送。因此，几乎不可能挂钩在浏览器自动完成输入字段时触发的事件。
更改不同浏览器的事件触发器：
对于用户名/密码字段：
对于其他表单字段：
您最好的选择是禁用表单中使用autocomplete="off"的表单的自动完成功能，或者定期轮询以查看其是否已填写。
对于您是否在 document.ready 之前或之前填写的问题，它因浏览器而异，甚至因版本而异。仅当您选择用户名密码字段时，才会填写用户名/密码字段。因此，如果您尝试附加到任何事件，您将拥有一个非常混乱的代码。
你可以好好阅读这里
这适用于我最新的 Firefox、Chrome 和 Edge：
$('#email').on('blur input', function() {
....
});
我正在阅读很多有关此问题的信息，并希望提供一个非常快速的解决方法来帮助我。
let style = window.getComputedStyle(document.getElementById('email'))
if (style && style.backgroundColor !== inputBackgroundNormalState) {
this.inputAutofilledByBrowser = true
}
我的模板在哪里inputBackgroundNormalState是 'rgb(255, 255, 255)'。
所以基本上当浏览器应用自动完成时，它们倾向于通过在输入上应用不同的（烦人的）黄色来指示输入是自动填充的。
编辑：这适用于每个浏览器
对于谷歌浏览器自动完成，这对我有用：
if ($("#textbox").is(":-webkit-autofill"))
{
// the value in the input field of the form was filled in with google chrome autocomplete
}
以防万一有人正在寻找解决方案（就像我今天一样），要收听浏览器自动填充更改，这是我构建的自定义 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!");
});
我也遇到了同样的问题，标签没有检测到自动填充和填充文本上移动标签的动画重叠，这个解决方案对我有用。
input:-webkit-autofill ~ label {
top:-20px;
}
不幸的是，我发现检查这个跨浏览器的唯一可靠方法是轮询输入。为了使其响应也听事件。Chrome 已经开始从需要 hack 的 javascript 中隐藏自动填充值。
为 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);
});
我的解决方案：
change像往常一样收听事件，并在 DOM 内容加载时执行以下操作：
setTimeout(function() {
$('input').each(function() {
var elem = $(this);
if (elem.val()) elem.change();
})
}, 250);
这将在用户有机会编辑它们之前为所有非空字段触发更改事件。
在 github 上有一个新的 polyfill 组件来解决这个问题。看看autofill-event。只需要凉亭安装它，瞧，自动填充按预期工作。
bower install autofill-event
我一直在寻找类似的东西。仅限 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>
这是来自 Klarna UI 团队的 CSS 解决方案。在这里查看他们很好的实现资源
对我来说很好。
input:-webkit-autofill {
animation-name: onAutoFillStart;
transition: background-color 50000s ease-in-out 0s;
}
input:not(:-webkit-autofill) {
animation-name: onAutoFillCancel;
}
我知道这是一个旧线程，但我可以想象很多人会在这里找到解决方案。
为此，您可以检查输入是否具有以下值：
$(function() {
setTimeout(function() {
if ($("#inputID").val().length > 0) {
// YOUR CODE
}
}, 100);
});
当加载以启用提交按钮时，我自己使用它来检查登录表单中的值。该代码是为 jQuery 编写的，但如果需要，很容易更改。
在 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"))
这是带有webkit 渲染引擎的浏览器的解决方案。当表单被自动填充时，输入将得到伪类：-webkit-autofill-（fe 输入：-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);
});
页面加载时的问题是获取密码值，甚至长度。这是因为浏览器的安全性。还有timeout，这是因为浏览器会在一段时间后填写表单。
此代码会将类auto_fill添加到填充的输入。另外，我尝试检查输入类型密码值或长度，但它在页面上发生某些事件后才起作用。所以我尝试触发一些事件，但没有成功。现在这是我的解决方案。享受！
我有这个问题的完美解决方案试试这个代码片段。
演示在这里
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 和 Edge (2020) 中，检查:-webkit-autofill会告诉您输入已被填充。但是，在用户以某种方式与页面交互之前，您的 JavaScript 无法获取输入中的值。
在代码中使用$('x').focus()和$('x').blur()/或触发鼠标事件无济于事。
在 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);
});
我将此解决方案用于相同的问题。
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');
});
我花了几个小时解决了在第一页加载时检测自动填充输入的问题（没有采取任何用户操作），并找到了适用于 Chrome、Opera、Edge 和 FF 的理想解决方案！
通过使用伪类搜索元素input:-webkit-autofill并执行所需的操作（在我的情况下，我正在更改输入包装类以使用浮动标签模式更改标签位置）。
因为 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/en/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("background-image");
if (bckgrnd === 'linear-gradient(rgba(255, 249, 145, 0.5), rgba(255, 249, 145, 0.5))') {
/*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 中并仔细检查语法；）当然添加一些调试警报或控制台日志并进行自定义。
对于正在寻找 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);
}
}
我在用户名上使用了 blur 事件来检查 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）
我有同样的问题，我已经写了这个解决方案。
它在页面加载时开始轮询每个输入字段（我设置了 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);
});
如果您只想检测是否使用了自动填充，而不是准确检测何时以及使用了哪个字段自动填充，您可以简单地添加一个将自动填充的隐藏元素，然后检查是否包含任何值。我知道这可能不是很多人感兴趣的。将输入字段设置为负的 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';
将此输入附加到表单并在表单提交时检查其值。
似乎确实有一个不依赖轮询的解决方案（至少对于 Chrome）。这几乎是骇人听闻的，但我确实认为比全球民意调查要好一些。
考虑以下场景：
用户开始填写 field1
用户选择自动填充字段 2 和字段 3 的自动完成建议
解决方案：在所有字段上注册一个 onblur，通过以下 jQuery 片段 $(':-webkit-autofill') 检查是否存在自动填充的字段
这不会立即生效，因为它会延迟到用户模糊 field1，但它不依赖于全局轮询，因此 IMO，它是一个更好的解决方案。
也就是说，由于按下回车键可以提交表单，因此您可能还需要相应的 onkeypress 处理程序。
或者，您可以使用全局轮询来检查 $(':-webkit-autofill')
根据我的个人经验，以下代码适用于 firefox IE 和 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();
});
我在 chrome 上成功了：
setTimeout(
function(){
$("#input_password").focus();
$("#input_username").focus();
console.log($("#input_username").val());
console.log($("#input_password").val());
}
,500);
我的解决方案是：
$.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');
}
);
});
经过研究，问题是 webkit 浏览器不会在自动完成时触发更改事件。我的解决方案是自己获取 webkit 添加的自动填充类并触发更改事件。
setTimeout(function() {
if($('input:-webkit-autofill').length > 0) {
//do some stuff
}
},300)
这是铬问题的链接。https://bugs.chromium.org/p/chromium/issues/detail?id=636425
我很难在 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')
对于火狐： if ($(this).val() != '')
$('selector').on('keyup', aFunction);
// If tab is active, auto focus for trigger event keyup, blur, change...
// for inputs has been autofill
$(window).on('load', () => {
if (!document.hidden) {
window.focus();
}
})
这对我有用。在 Chrome 上测试。
你可以试试这个来检测并清除所有自动填充
var autofillclear = false;
setInterval(function() {
if ($("input:-webkit-autofill") && autofillclear == false) {
$("input:-webkit-autofill").each(function() {
if ($(this).val() != '') {
$(this).val('');
autofillclear = true;
}
});
}
}, 500);
我在使用 Instagram 自动填充进行电子邮件和电话输入时遇到了这个问题，尝试了不同的解决方案，但没有任何效果，最后我必须做的就是禁用自动填充，就是为电话和电子邮件设置不同的名称属性，这样就可以了。
有一个技巧可以理解浏览器是否填充输入（布尔值）：
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就可以使用了。您能够检测到浏览器自动填充是否发生。
我找到了 angularjs 的工作解决方案。
诀窍是当指令检测到该字段由浏览器通过自动填充填充时，从输入字段中禁用所需属性。
由于不再需要输入字段，因此启用了登录提交按钮。
即使用户没有点击窗口正文，这也有效（请参阅Chrome Autofill/Autocomplete no value for password）。
指示：
angular.module('formtools').directive('autofill', [
'$interval', function ($interval)
{
return {
scope: false,
require: 'autofill',
controller: function AutoFillController(){
this.applied = false;
},
controllerAs: 'autoFill',
link: function (scope, elem, attrs, autofill)
{
var refresh = $interval(function() {
// attention: this needs jquery, jqlite from angular doesn't provide this method
if(elem.is(':-webkit-autofill'))
{
autofill.applied = true;
$interval.cancel(refresh);
}
}, 100, 100);
}
}
}]);
HTML：
<form name="loginform">
<input
type="text"
name="username"
autofill
ng-required="!autoFill.applied">
<input
type="password"
name="password"
autofill
ng-required="!autoFill.applied">
<button ng-disabled="loginform.$invalid">Login</button>
</form>
例如，为了检测电子邮件，我尝试了“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
在 CSS 中尝试
input:-webkit-autofill {
border-color: #9B9FC4 !important;
}