javascript - 自动填充不会触发 onChange

Question

我有一个登录表单，打开页面时，Chrome 会自动填写凭据。但是，input 元素的 onChange 事件没有被触发。

单击页面上的任意位置都会将它们注册到 input 的 value 属性中，这正是我们所需要的。我尝试执行 event.target.click()，但没有帮助。

在 onChange 中，我将值设置为如下状态:

this.setState({ email: event.target.value })

如果email.length === 0，提交按钮将被禁用。

因此，即使页面显示凭据已填写，提交按钮仍然看起来处于禁用状态。

由于单击任意位置都会注册值，因此单击提交按钮也会在提交之前注册它们。所以它工作得很好。

但这与时间无关，领域永远不会被填满。当我打开开发人员控制台并检查时，值字段为空，直到我单击某处。

这里唯一的问题是该按钮看起来被禁用，因为在单击某些内容之前电子邮件输入值为空。有没有解决这个问题的办法？

Answer 1

我偶然发现了这个问题，因为我也遇到了同样的问题。 React 中没有，但这个问题是普遍存在的。也许这会对其他偶然发现这一点的人有所帮助。

其他答案都没有真正解决问题。 OP 描述的问题是 Chrome 不会设置输入的值直到用户与页面交互。这可以是单击页面，甚至可以在控制台中输入随机内容。

发生用户交互后，将设置输入值并触发更改事件。

您甚至可以直观地看到这一点，因为自动填充文本的样式在首次呈现时有所不同，并且在交互发生后会更改输入的样式。

另外:触发点击或设置焦点或代码中的任何内容都没有帮助，只有真正的人机交互。

所以轮询该值并不是一个解决方案，因为如果页面未被点击，该值将保持为空。另外，声明您不能依赖更改事件并不真正相关，因为在延迟设置值时，事件被正确触发。无限期的延迟才是问题所在。

但是，您可以轮询 Chrome 的伪 CSS 类是否存在。在 Chrome 83(2020 年 6 月)中，这些是 :-internal-autofill-selected 和 :-internal-autofill-previewed。然而，这些确实会定期发生变化。此外，它们在渲染后并不直接存在。所以你应该设置足够的超时时间，或者轮询它。

普通 JavaScript 中的草率示例:

var input = document.getElementById('#someinput');

setTimeout(() => {
   if (input.matches(':-internal-autofill-selected')) {
      /* do something */
   }
}, 500);

此时您仍然无法获取该值，因此在这方面它仍然无法解决问题，但至少您可以根据自动填充数据的存在启用提交按钮(正如OP想要的那样)做)。或者做一些其他视觉上的事情。