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

Question

根据建议我的意思是当您开始输入时会出现下拉菜单，而且它的建议是基于您之前输入的内容：

例如，当我在标题字段中键入“a”时，它会给我一些非常烦人的建议。有人知道如何关闭它吗？ 提前致谢。

Answer 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>

Answer 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即将面世！每晚{6} {1}}自动完成功能支持v68.0a1和Beta v67.0b5（3/27/2019）功能属性，稳定版本应于2019年5月14日发布per the roadmap。

Answer 3

我最终将输入字段更改为

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

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

Answer 4

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

Answer 5

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

我建立了一个React Form。 Google Chrome将根据name属性自动完成表单输入。

 <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（）库为名称赋予一个随机值。

import uuid from 'react-uuid';

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

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

对我有用。

Answer 6

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

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

Answer 7

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

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

Answer 8

使用autocomplete="off"属性

报价：重要

  

将属性放在<input>元素上，   在<form>元素上否