如何关闭 html 输入表单字段建议？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43132693/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to turn off html input form field suggestions?
提问by Joseph
By suggestions I mean the drop down menu appear when you start typing, and it's suggestions are based on what you've typed before:
建议是指当您开始输入时会出现下拉菜单，它的建议基于您之前输入的内容：
for example when I type 'a' in title field, it will give me a ton of suggestions which is pretty annoying.Does anyone know how to turn that off? Thanks in advance.
例如，当我在标题字段中输入“a”时，它会给我很多非常烦人的建议。有谁知道如何关闭它？提前致谢。
回答by CodeMonkey
What you want is to disable HTML autocompleteAttribute.
您想要的是禁用 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.
在这里设置 autocomplete="off" 有两个效果：
它阻止浏览器保存字段数据以供以后在类似表单上自动完成，但启发式方法因浏览器而异。它阻止浏览器在会话历史记录中缓存表单数据。当表单数据缓存在会话历史中时，用户填写的信息将在用户提交表单并单击“返回”按钮返回原始表单页面后可见。
Read more on MDN Network
在MDN 网络上阅读更多内容
Here's an example how to do it.
这是一个如何做到这一点的例子。
<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>If it's on React framework then use as follows:
如果它在 React 框架上，则使用如下：
<input
id={field.name}
className="form-control"
type="text"
placeholder={field.name}
autoComplete="off"
{...fields}/>
Link to react docs
链接到反应文档
Update
更新
Here's an update to fix some browsers skipping "autocomplete=off" flag.
这是修复某些浏览器跳过“自动完成=关闭”标志的更新。
<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>回答by bsplosion
On Chrome, the only method we could identify which prevented all form fills was to use autocomplete="new-password". Apply this on any input which shouldn't have autocomplete, and it'll be enforced (even if the field has nothing to do with passwords, e.g. SomeStateIdfilling with state form values). See this link on the Chromium bugs discussion for more detail.
在 Chrome 上，我们可以确定阻止所有表单填写的唯一方法是使用autocomplete="new-password". 将此应用于不应具有自动完成功能的任何输入，它将被强制执行（即使该字段与密码无关，例如SomeStateId填写状态表单值）。 有关更多详细信息，请参阅 Chromium 错误讨论中的此链接。
Note that this only consistently works on Chromium-based browsers and Safari - Firefox doesn't have special handlers for this new-password(see this discussion for some detail).
请注意，这仅适用于基于 Chromium 的浏览器和 Safari - Firefox 没有为此提供特殊处理程序new-password（有关详细信息，请参阅此讨论）。
Update:Firefox is coming aboard!Nightly v68.0a1 and Beta v67.0b5 (3/27/2019) feature support for the new-passwordautocomplete attribute, stable releases should be coming on 5/14/2019 per the roadmap.
更新：Firefox 即将登场！Nightly v68.0a1 和 Beta v67.0b5 (3/27/2019) 功能支持new-password自动完成属性，根据路线图，稳定版本应于 2019 年 5 月 14 日发布。
回答by Gigo_G
use autocomplete="off"attribute
使用autocomplete="off"属性
Quote:IMPORTANT
引用:重要
Put the attribute on the
<input>element, NOTon the<form>element
将属性放在
<input>元素上，而 不是放在<form>元素上
回答by Alisher Musurmonv
I know it's been a while but if someone is looking for the answer this might help. I have used autocomplete="new-password"for the password field. and it solved my problem. Here is the MDN documentation.
我知道已经有一段时间了，但如果有人正在寻找答案，这可能会有所帮助。我已经用于autocomplete="new-password"密码字段。它解决了我的问题。这是MDN 文档。
回答by Peter B
I ended up changing the input field to
我最终将输入字段更改为
<textarea style="resize:none;"></textarea>
You'll never get autocomplete for textareas.
你永远不会得到 textareas 的自动完成。
回答by Dave Chong
autocomplete = "new-password" does not work for me.
autocomplete = "new-password" 对我不起作用。
I built a React Form. Google Chrome will autocomplete the form input based on the name attribute.
我构建了一个 React 表单。谷歌浏览器将根据名称属性自动完成表单输入。
<input
className="scp-remark"
type="text"
name="remark"
id='remark'
value={this.state.remark}
placeholder="Remark"
onChange={this.handleChange}
/>
It will base on the "name" attribute to decide whether to autofill your form. In this example, name: "remark". So Chrome will autofill based on all my previous "remark" inputs.
它将基于“名称”属性来决定是否自动填写您的表单。在本例中，名称：“备注”。所以 Chrome 会根据我之前所有的“备注”输入自动填充。
<input
className="scp-remark"
type="text"
name={uuid()} //disable Chrome autofill
id='remark'
value={this.state.remark}
placeholder="Remark"
onChange={this.handleChange}
/>
So, to hack this, I give name a random value using uuid() library.
所以，为了解决这个问题，我使用 uuid() 库给 name 一个随机值。
import uuid from 'react-uuid';
Now, the autocomplete dropdown list will not happen. I use the idattribute to identify the form input instead of namein the handleChange event handler
现在，自动完成下拉列表不会发生。我使用id属性来标识表单输入而不是handleChange 事件处理程序中的名称
handleChange = (event) => {
const {id, value} = event.target;
this.setState({
[id]: value,
})
}
And it works for me.
它对我有用。
