React doesn't render autocomplete off

How do I make react render it?

<input
id={field.name}
className="form-control"
type="text"
placeholder={field.name}
autocomplete="off"
{...field}/>
156195 次浏览
小开
最佳答案

大写字母“ C”autoComplete。这在反应文档中提到:

Https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes

小开

除了@azium 的回答，<input>应该放在 <form>标签内，然后 autoComplete工作

小开

你应该写:

autoComplete="new-password"

这将删除自动完成

小开

我只用了一句话就解决了问题:

If you use the recommended way with "changeHandler()" and the components state, just insert:

changeHandler = (e) => {
if (!e.isTrusted) return;
... your code
}

更多关于 changeHandler ()-Thing 的信息: < br > < a href = “ https://reactjs.org/docs/forms.html # control-Component”rel = “ nofollow norefrer”> https://reactjs.org/docs/forms.html#controlled-components

小开

如果你已经阅读了正确的答案并且仍然有这个问题(特别是在 Chrome 中) ，欢迎加入我们的俱乐部... ... 所以看看我是如何做到的:

<form autoComplete="new-password" ... >
<input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>

笔记

  • Form 不一定需要是输入元素的直接父元素
  • Input 需要一个 name 属性
  • 它还可以使用 React-Bootstrap <FormControl/>标签(而不是 <input/>)
小开

根据 Mozilla 文档，您必须设置一个无效的值才能真正关闭自动补全。在某些浏览器中，即使属性设置为 off，仍然会给出自动完成建议。

这对我很有效(反应引导) :

<FormControl
value={this.state.value}
autoComplete="nope"
{...props}
/>
小开

AutoComplete = “ none”-对我有用。

小开

我还尝试了许多选项，但最终我用 <div>标记替换了 <form>标记，并手动管理了该表单中的每个输入。

小开

Chrome 自动完成地狱关闭添加新的密码属性。

autoComplete="new-password"

实际行动看起来是这样的:

<input
type="password"
autoComplete="new-password"
/>

更多关于:

Chrome AutoComplete Discussion

小开

None of these solutions really worked on Chrome 80.

经过几个小时的尝试和错误，这个非常奇怪的黑客为我工作:

  1. 将 autoComplete="none"添加到每个 <input>-Google 现在跳过 autocomplete = “ off”
  2. 将字段包装在一个容器中: <form>或 <div>
  3. autoComplete="on"至少需要一个有效的输入字段。这应该是容器中的最后一个元素。因此，我在表单的底部添加了以下输入字段:
<input
type="text"
autoComplete="on"
value=""
style=\{\{display: 'none', opacity: 0, position: 'absolute', left: '-100000px'}}
readOnly={true}
/>
小开

这是“它在我的机器上工作”

Chrome 版本83.0.4103.116 及反应。看起来对我有用的技巧是把它放在一个表单中并添加 自动完成属性。注意，如果你在一个没有反应的应用程序上尝试，你将不得不用一个小写的 C 来自动完成

 <form autoComplete="off">
<input type="text" autoComplete="new-password" />
</form>

还有

<form autoComplete="new-password">
<input type="text" autoComplete="new-password" />
</form>
小开

这里和其他地方的大多数建议在2020年12月都失败了。我想我都试过了: 表单包装，设置自动完成为 off或者 newpassword(都不管用) ，使用 onFocus，确保我在 React 中使用 autoComplete而不是 autocomplete，但是没有一个有用。

In the end mscott2005's approach worked (+1) for me but I also tweaked it for a more minimal example which I am posting as an answer for others:

不需要表单，只需要两个输入标签:

  • 所需字段的 autocomplete="off":

    <input autoComplete="off" />

  • 假的隐藏字段的 autocomplete="on":

    <input autoComplete="on" style=\{\{ display: 'none' }}
id="fake-hidden-input-to-stop-google-address-lookup">

这个 id 是我所拥有的最好的不用注释就能记录真正的黑客行为的工具。

小开

我在使用 redux 表单的自动完成方面遇到了麻烦，这是我在2021/03/08使用 redux 表单时的一个解决方案

if(userId!=undefined)
{
instance.get('/user/'+userId)
.then(function(response){
dispatch(initialize('user_create_update_form',{
name:response.data.name,
email:response.data.email,
password:response.data.password,
user_scope:response.data.user_scope.map((item,index)=>{
return {
value: item.name,
label:item.name
}
})
}));
});
}
else
{
dispatch(initialize('user_create_update_form',{
name:"",
email:"Mail",
password:"New Password",
user_scope:[]
}));
}

目标是: 使用虚拟值发送表单。

小开

你可以使用 useEffect

function ScheduleComponent(props){
const [schedulecontent, setSchedulecontent] =seState({email:'',phone:'',date:'',time:''});


function handlechange(event) {
const { name, value } = event.target;
setSchedulecontent((prevContent) => {
return {
...prevContent,
[name]: value
};
})
}




useEffect(() => {
//do something here...
}, [schedulecontent.email,schedulecontent.phone,schedulecontent.date,schedulecontent.time]);}
小开

虽然这是一个老问题，但我找不到一个简单的方法和未来兼容的答案。

解决自动完成问题的一个非常简单的方法是使用输入字段，而不使其在某种程度上对浏览器是唯一的(当然，如果可以的话)。例如，如果你不添加的 id或 name它是工作的盒子。

获取字段名的方法是在 onChange 函数中添加 fieldName 值:

<input
type="search"
className="form-control"
placeholder="Quick Search"
onChange={(event) =>
columnSearch({
columnName: column.name,
searchValue: event.target.value,
})
}
/>

还要记住，输入不在 form HTML 标记中。

小开

If you are tired of trying different hacks...

只要加上

Autocomplete = “ new-password”

在您的密码输入字段中

看看这个:-

            <form action="" className='w-1/2 border border-indigo-500 mb-10'>
<label htmlFor="username">User Name</label>
<input type="text" name="username" id="username"/>
<label htmlFor="password">Password</label>
<input type="password" name="password" id="password"
autocomplete="new-password"/>
<label htmlFor="phone">Phone</label>
<input type="text" name="phone" id="phone"/>
<label htmlFor="email">Email</label>
<input type="text" name="email" id="email"/>
</form>
小开

如果您保存了页面的密码，您的浏览器将不会尊重 autocomplete='off'。在项目中设置 autocomplete='off'，刷新项目，然后从浏览器中删除保存的任何密码。

小开

首先检查值是否来自自动完成功能

function isValueComingFromAutoComplete(_value, field) {
return _value.length > 1 && inputs[field].value === "";
}

And then add the condition

function handleInputChange(_value, field) {
if (!isValueComingFromAutoComplete(_value, field)) {
// change state
}
}

注意，如果输入值的长度为1，那么它将不工作。

小开

这招对我很管用，试试看:

autoComplete="off" role="presentation"
小开

如果它不是一个密码字段，请做:

Autocomplete = “ new-off”

小开

在你的输入栏完成自动完成后，从浏览器中删除自动填充的详细信息，然后它就可以正常工作了

小开

在我的例子中，我的 EMail 和 Password 字段是由 Browser 自动完成的，它在呈现时覆盖了这两个字段的初始值。好吧，对我来说没有什么工作超过3天，我厌倦了尝试所有的选择。然后，我阅读了 BROWSER 如何拦截电子邮件和密码。我发现浏览器无论何时看到表单中的密码字段，它都会初始化它们的电子邮件和表单本身的密码字段(如果有任何密码保存在它的缓存中)。下面是解决方案: 只需在密码的输入/自定义组件字段中添加以下一行:

autoComplete="new-password"

会成功的。


提交答案