检测浏览器自动填充

如何判断浏览器是否已自动填充文本框?特别是用户名和密码框，自动填充页面加载。

我的第一个问题是，这在页面加载序列中什么时候发生?是在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就可以使用了。您可以检测浏览器是否发生了自动填充。

2021-12-01 10:37:28

其他回答

好吧，如果我们谈论的是控制输入，这可能是一个可能的解决方案:

    useEffect(() => {
      const inputEl = inputRef.current
      inputEl.addEventListener('focusout', () => props.onChange(inputRef.value))
    }, [])

注意，这可能会导致不必要的渲染。这种解决方案的优点是简单性和所有浏览器的支持。在小型形式中使用这种方法似乎是完全可以接受的。

2022-05-12 21:42:38

问题是不同的浏览器处理自动填充的方式不同。有些调度变更事件，有些则不调度。因此，当浏览器自动完成一个输入字段时，几乎不可能钩到一个事件。

更改不同浏览器的事件触发器: 对于用户名/密码字段: Firefox 4、IE 7和IE 8不分派更改事件。 Safari 5和Chrome 9会分派更改事件。对于其他表单字段: ie7和ie8不分派变更事件。当用户从建议列表中选择一个值并从字段中选择tab时，Firefox 4会分派change change事件。 Chrome 9不会分派更改事件。 Safari 5确实分派了更改事件。

你最好的选择是在你的表单中使用autocomplete="off"来禁用表单的自动完成功能，或者定期轮询查看它是否已填充。

关于你问的是在文件上还是之前填写的问题。不同浏览器，甚至不同版本都不一样。对于用户名/密码字段，仅当您选择用户名时才填写密码字段。因此，如果你试图附加到任何事件，你会有一个非常混乱的代码。

你可以在这里好好阅读一下

2012-07-29 15:07:47

我有这个问题的完美解决方案，试试这个代码片段。演示在这里

2017-06-26 09:54:55

例如，为了检测电子邮件，我尝试了“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

2019-11-21 23:29:33

下面是来自Klarna UI团队的CSS解决方案。参见它们的出色实现

对我来说没问题。

input:-webkit-autofill {
  animation-name: onAutoFillStart;
  transition: background-color 50000s ease-in-out 0s;
}
input:not(:-webkit-autofill) {
  animation-name: onAutoFillCancel;
}

2018-09-05 13:28:16

检测浏览器自动填充

推荐文章

最新文章

标签