如何关闭 html 输入表单字段建议？

Posted 2023-02-24

【中文标题】如何关闭 html 输入表单字段建议？

【英文标题】：How to turn off html input form field suggestions?

【发布时间】：2017-08-25 06:05:42

【问题描述】：

我所说的建议是指当您开始输入时出现的下拉菜单，它的建议是基于您之前输入的内容：

例如，当我在标题字段中输入“a”时，它会给我很多建议，这很烦人。有人知道如何关闭它吗？ 提前致谢。

【问题讨论】：

autocomplete="off"

它不起作用。我已经添加了它，当我开始输入建议时仍然会出现。 （它是 React）

你用在form标签还是input标签中？

如果你使用 chrome 阅读 this

我在表单标签中使用过。

【参考方案1】：

你想要的是禁用 html autocomplete 属性。

在这里设置 autocomplete="off" 有两个效果：

它会阻止浏览器保存字段数据以供以后自动完成 尽管启发式方法因浏览器而异，但在类似的形式上。它停止了 浏览器在会话历史记录中缓存表单数据。当表单数据是 缓存在会话历史中，用户填写的信息将 在用户提交表单并单击 返回按钮返回原始表单页面。

阅读更多MDN Network

下面是一个例子。

<form action="#" autocomplete="on">
  First name:<input type="text" name="fname"><br> 
  Last name: <input type="text" name="lname"><br> 
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

如果它在 React 框架上，那么使用如下：

<input
    id=field.name
    className="form-control"
    type="text"
    placeholder=field.name
    autoComplete="off"
    ...fields/>

链接到react docs

更新

这是修复某些浏览器跳过“autocomplete=off”标志的更新。

<form action="#" autocomplete="off">
  First name: <input type="text" name="fname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> Last name: <input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> E-mail:
  <input type="email" name="email" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br>
  <input type="submit">
</form>

【讨论】：

此方法似乎不再有效。现在有其他解决方案吗？

@webfacer，现在 google chrome 忽略了这个标志，一些密码管理应用也忽略了这个。但是，如果您有兴趣，这可以通过 javascript 实现。？

我知道，但我们决定不使用 JS，因为如果它被关闭了怎么办？这就是我们决定使用原生 html 的原因。嗯，由于安全问题，应该始终关闭自动完成功能。看到这个推特twitter.com/anttiviljami/status/816585860661518336

这些示例中的每一个仍在 Chrome 78 上为我显示自动建议。

autocomplete="off" 在 vue 项目中有效。谢谢！

【参考方案2】：

在 Chrome 上，我们可以确定阻止所有表单填写的唯一方法是使用 autocomplete="new-password"。将此应用于任何不应该具有自动完成功能的输入，并且它将被强制执行（即使该字段与密码无关，例如 SomeStateId 填充状态表单值）。 See this link on the Chromium bugs discussion for more detail.

请注意，这只适用于基于 Chromium 的浏览器和 Safari - Firefox 没有针对此new-password (see this discussion for some detail) 的特殊处理程序。

更新： Firefox 即将加入！ Nightly v68.0a1 和 Beta v67.0b5（2019 年 3 月 27 日）功能支持 new-password 自动完成属性，稳定版本将于 2019 年 5 月 14 日发布per the roadmap。

【参考方案3】：

使用autocomplete="off"属性

引用：重要

把属性放在<input>元素上， 不在<form> 元素上

【参考方案4】：

我知道已经有一段时间了，但如果有人正在寻找答案，这可能会有所帮助。我在密码字段中使用了autocomplete="new-password"。它解决了我的问题。这是MDN documentation。

【讨论】：

这在 2021 年对我有用，autocomplete="off" 不适用于 chrome 自动保存的密码。例如，您有一个具有相同 ID 的“电子邮件”和“密码”的注册表单，并且您在登录窗口中保存了您的凭据，它在注册表单中提供了用户和密码，这个“新密码”解决了它。

【参考方案5】：

添加以下两个属性会关闭所有字段建议（在 Chrome v85、Firefox v80 和 Edge v44 上测试）：

<input type="search" autocomplete="off">

【参考方案6】：

autocomplete = "new-password" 对我不起作用。

我构建了一个 React 表单。 谷歌浏览器将根据名称属性自动完成表单输入。

 <input 
  className="scp-remark" 
  type="text" 
  name="remark"
  id='remark'
  value=this.state.remark 
  placeholder="Remark" 
  onChange=this.handleChange 
/>

它将基于“名称”属性来决定是否自动填写您的表单。在本例中，名称：“remark”。因此 Chrome 会根据我之前的所有“备注”输入自动填充。

<input 
  className="scp-remark" 
  type="text" 
  name=uuid() //disable Chrome autofill
  id='remark'
  value=this.state.remark 
  placeholder="Remark" 
  onChange=this.handleChange 
/>

所以，为了破解这个问题，我使用 uuid() 库给 name 一个随机值。

import uuid from 'react-uuid';

现在，自动完成下拉列表不会出现。 我使用 id 属性来识别表单输入，而不是 handleChange 事件处理程序中的 name

handleChange = (event) => 
    const id, value = event.target;
    this.setState(
        [id]: value,
    )

它对我有用。

【参考方案7】：

我有类似的问题，但我最终还是这样做了

<input id="inp1" autocomplete="off" maxlength="1" /> IE。， autocomplete = 'off' 并且建议将消失。

【参考方案8】：

我最终将输入字段更改为

<textarea style="resize:none;"></textarea>

你永远不会获得 textareas 的自动完成功能。

【讨论】：

移动时我更喜欢我的键盘根据输入来改变，即。 <input type="email"/>

【参考方案9】：

如果你使用 ReactJS。然后将其设为 autoComplete="off"

<input type="text" autoComplete="off" />

【参考方案10】：

<input type="text" autocomplete="off"> 实际上是正确的答案，尽管对我来说还不是很清楚。

根据MDN：

如果浏览器在设置后仍继续提出建议 自动完成关闭，然后您必须更改的名称属性 输入元素。

该属性确实会阻止将来保存数据，但不一定会清除现有保存的数据。因此，如果即使在将属性设置为 "off" 后仍然提出建议，则：

重命名输入 清除现有数据条目

此外，如果您在 React 上下文中工作，该属性自然会变为 autoComplete。

干杯！