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

Question

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

例如，当我在标题字段中键入 'a' 时，它会给我很多非常棒的建议 annoying.Does 有人知道如何关闭它吗？提前致谢。

Answer 1

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

Setting autocomplete="off" here has two effects:

It stops the browser from saving field data for later autocompletion on similar forms though heuristics that vary by browser. It stops the browser from caching form data in session history. When form data is cached in session history, the information filled in by the user will be visible after the user has submitted the form and clicked on the Back button to go back to the original form page.

阅读更多关于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}/>

Link 到 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>

Answer 2

我最终将输入字段更改为

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

您永远不会获得文本区域的自动完成功能。

Answer 3

在 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 (3/27/2019) 功能支持对于 new-password 自动完成属性，稳定版本应该会在 2019 年 5 月 14 日发布 per the roadmap。

Answer 4

使用autocomplete="off"属性

引用：重要

Put the attribute on the <input> element, NOT on the <form> element

Answer 5

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

Answer 6

自动完成 = "new-password" 对我不起作用。

我构建了一个 React 表单。 Google Chrome 将根据名称属性自动完成表单输入。

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

它将根据 "name" 属性来决定是否自动填充您的表单。在此示例中，名称："remark"。所以 Chrome 将根据我之前的所有 "remark" 输入自动填充。

<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,
    })
}

它对我有用。

Answer 7

我遇到了类似的问题，但我最终还是做了

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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

根据MDN：

If a browser keeps on making suggestions even after setting autocomplete to off, then you have to change the name attribute of the input element.

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

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

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

干杯！

Answer 11

这个解决方案对我有用：添加 readonly 属性。

Here's an update to fix some browsers skipping the "autocomplete=off" flag.
<input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">

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

How to turn off html input form field suggestions?

html

form-fields