自动填充不会触发 onChange

Question

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

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

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

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

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

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

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

这与时间无关，领域永远不会被填补。当我打开 Developer Console 并检查时，值字段为空，直到我单击某处。

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

原文由 naezith 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

另外：触发点击或设置焦点或代码中的任何内容都无济于事，只有真正的人机交互。

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

但是，您可以轮询 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 想要做的那样）。或者做一些其他视觉的东西。

原文由 Karim Ayachi 发布，翻译遵循 CC BY-SA 4.0 许可协议