我有一个 nextjs 应用程序，它有一个包含名字、姓氏、电子邮件、地址、电话的表单。我已经用 React 钩子形式连接了它。几乎我所有的客户都使用 safari，当 safari 自动完成一个字段时，它不会更新状态，因此没有数据发送到服务器并出现错误，您需要填写已经填写的字段，所以用户只需退出。
我已将自动完成设置为“关闭”、“无”等。我已将其设置在每个字段、表单标签本身以及隐藏的输入字段上。我尝试了各种不同的组合，但它们似乎都不起作用并停止自动完成功能。到目前为止，我取得的最好结果是现在它只自动填充当前输入，而不是整个表单。但这不是我们想要的结果。
【问题讨论】：
标签： html reactjs input autocomplete next.js
经过长时间的测试，我找到了解决此问题的解决方案。
但首先我要列出不同的部分解决方案，如果有人需要特定的解决方案
将属性autocomplete="off" 设置为表单并将autocomplete="none" 设置为所有输入导致自动填充仅建议和自动完成单个字段，而不是整个表单。此功能已在 chrome 和 firefox 上进行了测试。我没有在 safari 上测试它，因为它没有产生我想要的结果。
有人说，如果您将隐藏字段以display: none 作为样式并添加名称：name="firstName" 等。它将自动完成这些，而不是您的主要字段。但是，这没有对我有用。
更改输入元素的 attr type="search" 在 chrome 和 firefox 中有效。它在输入的末尾添加了一个小 x，因此您可以“清理”您的搜索。 autoComplete="off" 必须添加到每个字段。这没有在 safari 上工作。
autoComplete 属性需要传递一个字符串，这意味着它可以是 "off","none","nope","new_input_64" 。它有时在 chorme 上有效，所以我没有费心在 safari 上测试它。编辑：它不起作用。
有些人已经发布了答案，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 来正确管理状态并具有错误功能，因此该解决方案不再有效。所以，嘿，如果你有和我一样的具体情况，请分享一下在 cmets 中是否对你有用。
【讨论】：