reactjs - 阻止 Google 自动填充用反应表单上的现有值覆盖字段

Question

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

我已经在非反应表单中对此进行了测试，并且 Google 自动填充工作正常，因为它不会覆盖字段中的现有值。但是在反应中，假设我插入了 firstname = john，然后在电子邮件上使用自动填充......它会超过“约翰”并使用保存在自动填充中的任何内容。

有人知道解决这个问题的方法吗？我不会关闭自动完成功能，因为我仍然希望用户具有该功能，无论如何我已经尝试了 autocomplete=off 的变体，如其他地方建议的那样，但仍然没有结果

score 0 · Accepted Answer

您可以在不希望自动填充的输入中使用 autocomplete="off"。

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

例子：<input type="text" name="foo" placeholder="foo" autocomplete="off">

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

inputElm.setAttribute("自动完成", "关闭");

举个例子。

问候

亚伦

score 0 · Accepted Answer

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

<input type="text" name="" value="" readOnly={true} style={{display: "none"}}/>
<input
  type="text"
  name={"address " + Math.random()}
/>

2 回答 2