React 不会关闭自动完成功能

Question

如何让 react 渲染它？

<input
    id={field.name}
    className="form-control"
    type="text"
    placeholder={field.name}
    autocomplete="off"
    {...field}/>

Answer 1

大写“C”autoComplete。 React 文档中提到了这一点：

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

Answer 2

你应该输入：

autoComplete="new-password"

这将删除自动完成

Answer 3

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

这对我有用（react-bootstrap）：

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

Answer 4

如果您已阅读正确答案但仍然存在此问题（尤其是在 Chrome 中），欢迎加入俱乐部...看看我是如何完成的：

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

注意事项

• 表单不一定是输入元素的直接父级
• 输入需要名称属性
• 它也适用于 React-Bootstrap <FormControl/> 标签（而不是 <input/>）

Answer 5

autoComplete="none" - 适合我。

Answer 6

这些解决方案都不能真正在 Chrome 80 上运行。

经过数小时的反复试验，这个非常奇怪的 hack 对我有用：

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}
/>

Answer 7

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

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

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

和

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

Answer 8

这里和其他地方的大多数建议在 2020 年 12 月都失败了。我想我都尝试了：表单包装器，将自动完成设置为 off 或 newpassword（均无效），使用 onFocus，确保我使用 @ React 中的 987654323@ 而不是 autocomplete，但它们都没有帮助。

最后，mscott2005 的方法对我有用 (+1)，但我也对其进行了调整，以获得一个更简单的示例，我将其发布为其他人的答案：

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

• autocomplete="off" 用于所需字段：

  <input autoComplete="off" />
  

• autocomplete="on" 为假隐藏字段：

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

id 是我在不使用评论的情况下记录真正的 hack 的最佳方法。

Answer 9

Chrome 自动完成地狱通过添加 new-password 属性关闭。

autoComplete="new-password"

实际效果如下：

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

更多讨论：

Chrome AutoComplete Discussion

Answer 10

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

Answer 11

我只用了一行就解决了：

如果您使用“changeHandler()”和组件状态的推荐方式，只需插入：

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

关于 changeHandler()-Thing 的更多信息：
https://reactjs.org/docs/forms.html#controlled-components

Answer 12

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

Answer 13

我在 redux 表单上自动完成时遇到问题，这是我使用 redux 表单时所做的一种解决方法； 2021/03/08 工作

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:[]
      }));
    }

目标是：发送带有虚拟值的表单。

Answer 14

你可以使用 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]);}

Answer 15

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

解决自动完成问题的一个非常简单的方法是使用输入字段，而不以某种方式使其对浏览器具有唯一性（当然，如果可以的话）。例如，如果您不添加 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 标记内。

Answer 16

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

Answer 17

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

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

然后加上条件

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

请注意，如果输入值的长度为 1，它将不起作用。

Answer 18

如果你厌倦了尝试不同的技巧......

只需添加

autocomplete="新密码"

在您的密码输入字段中

检查这个：-

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