阻止Google自动填充功能覆盖React表单上现有值的字段

Question

我在react中有一个简单的形式，它以模态形式存在。例如，如果用户要对电子邮件字段使用自动填充，它将更新其他字段，包括我已经填写的字段。这将导致用户提交数据，而不知道视图中的字段已更新。

我已经以非反应形式对此进行了测试，并且Google Autofill可以正常工作，因为它不会覆盖字段中的现有值。但是在react中，可以说我插入了firstname = john，然后在电子邮件上使用了自动填充功能……它将覆盖“ John”并使用自动填充功能中保存的所有内容。

有人知道解决此问题的方法吗？我不会关闭自动完成功能，因为我仍然希望用户具备该功能，无论如何，我还是尝试过建议使用autocomplete = off的变体，但在其他地方还是没有结果

Answer 1

您可以在不想自动填充的输入中使用autocomplete =“ off”。

还请确保您输入的类型正确。

示例：/** * If a value is present, returns the value, otherwise returns * {@code other}. * * @param other the value to be returned, if no value is present. * May be {@code null}. * @return the value, if present, otherwise {@code other} */ public T orElse(T other) { return value != null ? value : other; }

您甚至可以使用JS做到这一点：

inputElm.setAttribute（“ autocomplete”，“ off”）;

作为示例。

致谢

亚伦

Answer 2

尝试在输入之前创建隐藏的输入，并为您不希望Chrome自动填充值的原始输入名称添加随机数：

Personal VPN