如何关闭输入自动完成？

Question

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

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

Answer 1

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

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

我尝试过的事情

1.让浏览器一次只自动填充一个输入

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

2.添加隐藏输入

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

3.将输入类型更改为“搜索”

更改输入元素的 attr type="search"在 chrome 和 firefox 中工作。 它在输入的末尾添加了一个小 x，因此您可以“清理”您的搜索。 autoComplete="off"必须添加到每个字段。 这在 safari 上不起作用。

4.给autoComplete添加不同的值

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

5.将 label 名称更改为一些乱码

有些人发布了答案，safari 也读取 label 名称，所以我也更改了这些名称，但无济于事

我的解决方案：

在敲了我一整天的头之后，一个想法来了。 如果我将所有输入更改为文本区域怎么办......所以我做到了。 首先，我将输入更改为 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 来正确管理 state 并具有错误功能，因此该解决方案不再有效。 所以，嘿，如果你有和我一样的具体情况，请在评论中分享是否对你有用。