如何关闭输入自动完成？

Question

我有一个 nextjs 应用程序，它有一个包含名字、姓氏、电子邮件、地址的表单，phone。我用 React 钩子形式连接它。几乎我所有的客户都使用 safari，当 safari 自动完成一个字段时，它不会更新状态，所以没有数据发送到服务器并且出现错误，你需要填写已经填写的字段，所以用户只是退出。

我已将自动完成设置为“关闭”、“none”等。我已将其放在每个字段和表单标签本身以及隐藏的输入字段上。我尝试了各种不同的组合，但其中 none 似乎有效并停止了自动完成功能。到目前为止我取得的最好结果是现在它只自动填充当前输入，而不是整个表单。但这不是想要的结果。

Answer 1

经过长时间的测试，我找到了解决方案。

但首先我要列出不同的部分解决方案，如果有人需要特定的解决方案

我尝试过的东西

1.使浏览器一次仅自动填充一个输入

为表单设置属性 autocomplete="off" 并为所有输入设置 autocomplete="none" 导致自动填充仅建议和自动完成单个字段，而不是整个表单。此功能已在 chrome 和 firefox 上测试。我没有在 safari 上测试它，因为它没有产生我想要的结果。

2。 添加隐藏输入

有人说，如果您将隐藏字段的样式设置为 display: none 并添加名称：name="firstName" 等，它会自动完成这些字段，而不是您的主要字段。然而这个没有对我有用。

3。 正在将输入类型更改为 'Search'

更改输入元素的属性 type="search" 在 chrome 和 firefox 中有效。它在输入的末尾添加了一点 x，因此您可以 'clean' 您的搜索。 autoComplete="off" 必须添加到每个字段。这个没有在 Safari 上工作。

4。 向自动完成添加不同的值

autoComplete 属性需要传递一个字符串，这意味着它可以是 "off","none","nope","new_input_64" 。它有时在 chorme 上工作，所以我没有费心在 safari 上测试它。编辑：它不起作用。

5。 将标签名称更改为一些乱码

有人贴出来回答了，那个safari也会读取标签名，所以我也改了，但是没用

我的 解法：

脑袋撞了一整天，灵机一动。如果我将所有输入更改为文本区域怎么办...所以我做到了。 首先，我将输入更改为 textareas 并添加了一个 rows={1} 所以它只有一行。然后我添加了以下样式

 textarea {
  resize: none;
  overflow-x: scroll;
  white-space: nowrap;
}

.no-scroll::-webkit-scrollbar,
.no-scroll::-webkit-scrollbar-track-piece {
  width: 0px;
}
.no-scroll::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 0px;
}

.no-scroll::-webkit-scrollbar-thumb {
  border-radius: 0px;
  border: 0px solid transparent;
  background-clip: content-box;
  background-color: transparent;
  width: 0px;
}

为了让用户无法使用 return 添加新行，我将其添加到组件的顶部。

 useEffect(() => {
    var textArea = document.getElementsByTagName('textarea')[0] //your desired TextArea
    textArea.onkeydown = function (e) {
      if (e.keyCode == 13) {
        e.preventDefault()
      }
    }
  }, [])

现在，终于，safari 不会自动完成我的字段。

重要提示*

我使用了正常的输入（没有 react-hook-forms）并且只添加了 autoComplete="off" 到有效的字段。但是由于我添加了 react-hook-forms 来正确管理状态并具有错误功能，因此该解决方案不再有效。所以，嘿，如果你有像我这样的具体案例，请在评论中分享是否适合你。