如何判断浏览器是否已自动填充文本框?特别是用户名和密码框，自动填充页面加载。
我的第一个问题是，这在页面加载序列中什么时候发生?是在document.ready之前还是之后?
其次，我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生，只是挂钩到事件。最好是这样的:
if (autoFilled == true) {
} else {
}
如果可能的话，我很想看到一个jsfiddle显示你的答案。
可能重复
DOM事件浏览器密码自动填充?
浏览器自动填充和Javascript触发事件
这两个问题都没有真正解释什么事件被触发，它们只是不断地重新检查文本框(对性能不好!)
当前回答
这里有一个技巧来理解浏览器是否填充输入(布尔):
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找到了一个有效的解决方案。
诀窍是在以下情况下禁用输入字段的required属性 该指令检测字段是由浏览器通过自动填充填充的。
由于不再需要输入字段，登录提交按钮将被启用。
这即使用户没有点击进入窗口的主体(见Chrome自动填充/自动完成无值密码)。
指令:
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>
我也在找类似的东西。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>
在github上有一个新的polyfill组件来解决这个问题。看看autofill-event。只需要安装它和voilà，自动填充工作如预期。
bower install autofill-event
我知道这是一个老话题，但我可以想象很多人来这里寻找解决方案。
要做到这一点，你可以检查输入(s)是否有值(s):
$(function() {
setTimeout(function() {
if ($("#inputID").val().length > 0) {
// YOUR CODE
}
}, 100);
});
当我的登录表单被加载以启用提交按钮时，我自己就用它来检查登录表单中的值。 代码是为jQuery编写的，但是如果需要的话很容易更改。
我读了很多关于这个问题的文章，想提供一个非常快速的解决方法来帮助我。
let style = window.getComputedStyle(document.getElementById('email'))
if (style && style.backgroundColor !== inputBackgroundNormalState) {
this.inputAutofilledByBrowser = true
}
我的模板的inputBackgroundNormalState是'rgb(255,255,255)'。
所以基本上当浏览器应用自动补全时，他们倾向于通过在输入上应用不同的(烦人的)黄色来指示输入是自动填充的。
编辑:这适用于所有浏览器
