固定的只需在实际输入字段上方添加

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion-MDNhttps://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908-中等在EDGE、Chrome（最新版本63）、Firefox Quantum（57.0.4 64-бит）、Firefox（52.2.0）上测试假字段是chrome/opera自动填充错误字段的一种解决方法

 const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}

 <input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />

<TextField
  name='userName'
  autoComplete='nope'
  ... 
/>

<TextField
      name='password'
      autoComplete='new-password'
      ... 
    />

非常简单的解决方案只需更改标签名称和字段名称，而不是更通用的名称，例如：名称、联系人、电子邮件。使用“邮件收件人”而不是“电子邮件”。浏览器忽略这些字段的自动完成。

自动填充功能在不选择字段的情况下更改值。我们可以在状态管理中使用它来忽略选择事件之前的状态更改。

React中的一个示例：

import React, {Component} from 'react';

class NoAutoFillInput extends Component{

    constructor() {
        super();
        this.state = {
            locked: true
        }
    }

    onChange(event){
        if (!this.state.locked){
            this.props.onChange(event.target.value);
        }
    }

    render() {
        let props = {...this.props, ...{onChange: this.onChange.bind(this)}, ...{onSelect: () => this.setState({locked: false})}};
        return <input {...props}/>;
    }
}

export default NoAutoFillInput;

如果浏览器尝试填充字段，则元素仍被锁定，状态不受影响。现在，您可以用NoAutoFillInput组件替换输入字段，以防止自动填充：

<div className="form-group row">
    <div className="col-sm-2">
        <NoAutoFillInput type="text" name="myUserName" className="form-control" placeholder="Username" value={this.state.userName} onChange={value => this.setState({userName: value})}/>
    </div>
    <div className="col-sm-2">
        <NoAutoFillInput type="password" name="myPassword" className="form-control" placeholder="Password" value={this.state.password} onChange={value => this.setState({password: value})}/>
    </div>
</div>

当然，这个想法也可以用于其他JavaScript框架。

我必须花了两天的时间来讨论这一问题，然后才能制定自己的解决方案：

首先，如果它适用于任务，则放弃输入并使用文本区域。据我所知，自动填充/自动完成在文本区域没有业务，就我们正在努力实现的目标而言，这是一个很好的开始。现在，您只需更改该元素的一些默认行为，使其充当输入。

接下来，您将希望将任何长条目保持在同一行上，如输入，并希望文本区域与光标一起沿y轴滚动。我们还想去掉调整大小框，因为我们正在尽力模拟输入的行为，而输入没有调整大小句柄。我们通过一些快速CSS实现了所有这些：

#您的文本区域{调整大小：无；overflow-y：隐藏；空白：nowrap；}

最后，您需要确保讨厌的滚动条不会出现，破坏聚会（对于那些特别长的条目），因此确保文本区域不会显示：

#您的文本区域：：-webkit滚动条{显示：无；}

轻松点。此解决方案没有自动完成问题。

Firefox 30忽略密码的autocomplete=“off”，而是选择提示用户密码是否应存储在客户端上。请注意2014年5月5日的以下评论：

密码管理器始终提示是否要保存密码。未经用户许可，密码不会保存。我们是继IE和Chrome之后第三个实现这一改变的浏览器。

根据Mozilla开发者网络文档，布尔表单元素属性autocomplete防止表单数据在旧浏览器中缓存。

<input type="text" name="foo" autocomplete="off" />

大多数主要浏览器和密码管理器（正确地说，IMHO）现在都忽略了autocomplete=off。

为什么？许多银行和其他“高安全性”网站“出于安全目的”在其登录页面中添加了autocomplete=off，但这实际上降低了安全性，因为这会导致人们更改这些高安全性网站上的密码，以便于记忆（从而破解），因为自动完成功能已被破坏。

很久以前，大多数密码管理器开始忽略autocomplete=off，现在浏览器开始只对用户名/密码输入执行相同的操作。

不幸的是，自动完成实现中的错误会将用户名和/或密码信息插入到不适当的表单字段中，从而导致表单验证错误，或者更糟的是，意外地将用户名插入到用户故意留空的字段中。

web开发人员应该做什么？

如果您可以单独保存页面上的所有密码字段，这是一个很好的开始，因为密码字段的存在似乎是用户/密码自动完成的主要触发因素。否则，请阅读下面的提示。Safari注意到有两个密码字段，并在这种情况下禁用自动完成，假设它必须是一个更改密码表单，而不是登录表单。因此，请确保在允许的任何表单中使用两个密码域（新的和确认新的）不幸的是，Chrome34每当看到密码字段时，都会尝试使用user/pass自动填充字段。这是一个非常糟糕的bug，希望他们会改变Safari的行为。但是，将其添加到表单顶部似乎会禁用密码自动填充：<input-type=“text”style=“display:none”><input-type=“password”style=“display:none”>

我还没有彻底调查IE或Firefox，但如果其他人在评论中有信息，我很乐意更新答案。