自动填充不会触发 onChange

Question

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

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

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

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

如果email.length === 0.

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

因为点击任何地方都会注册这些值，所以点击提交按钮也会在提交之前注册它们。所以它完美地工作。

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

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

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 想要做的那样）。或者做一些其他视觉的东西。

Answer 2

我在这里创建了一个示例应用程序 https://codesandbox.io/s/ynkvmv16v

这能解决您的问题吗？