有时，即使autocomplete=off也无法阻止将凭据填写到错误的字段中，而不是用户或昵称字段。

除了apinstein关于浏览器行为的帖子之外，还有一个变通方法。

修复浏览器自动填充为只读，并在焦点上设置为可写（单击并选项卡）

 <input type="password" readonly
     onfocus="this.removeAttribute('readonly');"/>

更新：

Mobile Safari在字段中设置光标，但不显示虚拟键盘。新的修复程序与以前一样，但它处理虚拟键盘：

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

现场演示https://jsfiddle.net/danielsuess/n0scguv6/

//更新结束

因为浏览器自动将凭据填充到错误的文本字段！？

我注意到在Chrome和Safari上，当相同的表单中有密码字段时，会出现这种奇怪的行为。我猜浏览器会寻找一个密码字段来插入您保存的凭据。然后它会自动填充（只是由于观察而猜测）最近的类似文本的输入字段，该字段出现在DOM中的密码字段之前。因为浏览器是最后一个实例，您无法控制它。

上面的这个只读修复对我有用。

我的解决方案是使用angular js指令动态更改文本输入类型它就像魅力一样

首先添加2个隐藏文本字段

然后添加一个像这样的角度指令

 (function () {

    'use strict';

    appname.directive('changePasswordType', directive);

    directive.$inject = ['$timeout', '$rootScope',  '$cookies'];

    function directive($timeout,  $rootScope, $cookies) {
        var directive = {
            link: link,
            restrict: 'A'
        };

        return directive;

        function link(scope,element) {
            var process = function () {
                var elem =element[0];
                elem.value.length > 0 ? element[0].setAttribute("type", "password") :
                element[0].setAttribute("type", "text");
            }

            element.bind('input', function () {
                process();
            });

            element.bind('keyup', function () {
                process();
            });
        }
    }
})()

然后在需要阻止自动完成的文本字段中使用它

    <input type="text" style="display:none">\\can avoid this 2 lines
    <input type="password" style="display:none">
    <input type="text"  autocomplete="new-password" change-password-type>

注意：不要忘记包含jquery，并在开始时设置type=“text”

定义输入的属性type=“text”和autocomplete=“off”足以为我关闭自动完成。

除了type=“password”之外，我尝试使用JavaScript钩住别人的建议中的onfocus/onfocuout事件来切换只读属性，效果很好，但当密码字段编辑开始为空时，自动完成密码再次出现。

我建议除了上述工作正常的解决方法之外，还可以使用JavaScript挂钩oninput事件来切换关于密码长度的类型属性。。

<input id="pwd1" type="text" autocomplete="off" oninput="sw(this)" readonly onfocus="a(this)" onfocusout="b(this)" />
<input id="pwd2" type="text" autocomplete="off" oninput="sw(this)" readonly onfocus="a(this)" onfocusout="b(this)" />

和JavaScript。。

function sw(e) {
    e.setAttribute('type', (e.value.length > 0) ? 'password' : 'text');
}
function a(e) {
    e.removeAttribute('readonly');
}
function b(e) {
    e.setAttribute('readonly', 'readonly');
}

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

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框架。

我在一个表单上遇到了问题，其中包含用户名和电子邮件的输入字段，而电子邮件正好在用户名之后。Chrome会自动将我当前的网站用户名填入电子邮件字段，并将重点放在该字段上。这并不理想，因为它是一种向web应用程序添加新用户的表单。

看起来，如果您有两个输入，一个接一个，其中第一个输入的标签或ID中包含“用户名”或用户名，而下一个输入的商标或ID中则包含“电子邮件”一词，chrome将自动填充电子邮件字段。

对我来说，解决问题的是将输入的ID更改为不包含这些单词。我还必须设置标签的文本转换为空字符串，并使用javascript settimeout函数将标签更改回0.01秒后的状态。

setTimeout(function () { document.getElementById('id_of_email_input_label').innerHTML = 'Email:'; }, 10);

如果您遇到任何其他输入字段被错误自动填充的问题，我会尝试此方法。

我已经在这里发布了一个解决方案：禁用Chrome自动填充信用卡

解决方法是将自动完成属性设置为“cc csc”，该属性的值是信用卡的csc，并且不允许他们存储它！（目前…）

autocomplete="cc-csc"