如何关闭输入自动完成？

Posted 2023-03-05

【中文标题】如何关闭输入自动完成？

【英文标题】：How to turn off input autocomplete?

【发布时间】：2021-12-31 21:50:16

【问题描述】：

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

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

【问题讨论】：

试试***.com/a/26931345/9294837

我目前正在尝试使用随机名称属性，如果它可以正常工作，我会将其作为官方答案。遗憾的是，您的链接中的这个答案对我不起作用。

【参考方案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 属性需要传递一个字符串，这意味着它可以是 "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 来正确管理状态并具有错误功能，因此该解决方案不再有效。所以，嘿，如果你有和我一样的具体情况，请分享一下在 cmets 中是否对你有用。