Html React 不会关闭自动完成功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37503656/
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
React doesn't render autocomplete off
提问by Yaroslav
How do I make react render it?
我如何让反应渲染它？
<input
id={field.name}
className="form-control"
type="text"
placeholder={field.name}
autocomplete="off"
{...field}/>
回答by azium
Capital "C" autoComplete. This is mentioned in the React documentation:
大写“C” autoComplete。React 文档中提到了这一点：
https://facebook.github.io/react/docs/tags-and-attributes.html
https://facebook.github.io/react/docs/tags-and-attributes.html
回答by JpCrow
You should put:
你应该把：
autoComplete="new-password"
This will remove the autocomplete
这将删除自动完成
回答by Pim
According to Mozilla documentation, you have to set an invalid value to really turn the autocompletion off. In some browsers, autocomplete suggestions are still given even though the attribute is set to off.
根据Mozilla 文档，您必须设置一个无效值才能真正关闭自动完成功能。在某些浏览器中，即使该属性设置为关闭，仍会提供自动完成建议。
This worked for me (react-bootstrap):
这对我有用（反应引导）：
<FormControl
value={this.state.value}
autoComplete="nope"
{...props}
/>
回答by w3jimmy
If you've read the correct answer and still have this issue (especially in Chrome), welcome to the club... so check how I've accomplished it:
如果您已阅读正确答案但仍然存在此问题（尤其是在 Chrome 中），欢迎来到俱乐部……所以请检查我是如何完成的：
<form autoComplete="new-password" ... >
<input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>
Notes
笔记
- form does not necessarily need to be the direct parent of the input element
- input needs a name attribute
- it also works with React-Bootstrap
<FormControl/>tag (instead of<input/>)
- 表单不一定需要是输入元素的直接父元素
- 输入需要一个名称属性
- 它也适用于 React-Bootstrap
<FormControl/>标签（而不是<input/>）
回答by Alexander Utrobin
autoComplete="none" - works for me.
autoComplete="none" - 对我有用。
回答by Saqy G
Chrome autocomplete hell turns off by adding new-password attribute.
Chrome 自动完成地狱通过添加新密码属性关闭。
autoComplete="new-password"
In action looks like this:
在行动中看起来像这样：
<input
type="password"
autoComplete="new-password"
/>
more discussion on:
更多讨论：
回答by mscott2005
None of these solutions really worked on Chrome 80.
这些解决方案都没有真正适用于 Chrome 80。
After hours of trial and error, this very strange hack worked for me:
经过数小时的反复试验，这个非常奇怪的黑客对我有用：
- Add
autoComplete="none"to each<input>- Google skips autocomplete="off" now - Wrap your fields in a container :
<form>or<div> - You need at least one valid input field with
autoComplete="on". This should be the last element in the container. So I added the following input field to the bottom of my form:
- 添加
autoComplete="none"到每个<input>- Google 现在跳过 autocomplete="off" - 将您的字段包装在容器中：
<form>或<div> - 您至少需要一个带有
autoComplete="on". 这应该是容器中的最后一个元素。所以我在表单底部添加了以下输入字段：
<input
type="text"
autoComplete="on"
value=""
style={{display: 'none', opacity: 0, position: 'absolute', left: '-100000px'}}
readOnly={true}
/>
回答by radu ghitescu
I've also tried many options, but what I ended up doing was to replace the <form>tag with <div>tag and manually manage each input that I had in that form.
我也尝试了很多选项，但我最终做的是<form>用<div>标签替换标签并手动管理我在该表单中的每个输入。
回答by Marcel Ennix
I solved it with just one line:
我只用一行就解决了它：
If you use the recommended way with "changeHandler()" and the components state, just insert:
如果您使用“changeHandler()”和组件状态的推荐方式，只需插入：
changeHandler = (e) => {
if (!e.isTrusted) return;
... your code
}
More infos on that changeHandler()-Thing:
https://reactjs.org/docs/forms.html#controlled-components
有关该 changeHandler()-Thing 的更多信息：https://reactjs.org/docs/forms.html#controlled-components
回答by Monstheitroad
In addition to @azium's answer, <input>should be put inside the <form>tag, then autoCompleteworks
除了@azium 的答案，<input>应该放在<form>标签内，然后autoComplete工作
