如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?


当前回答

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

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

autocomplete="cc-csc"

其他回答

为了避免无效的XHTML,可以使用JavaScript设置此属性。使用jQuery的示例:

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

问题是没有JavaScript的用户将获得自动完成功能。

始终有效的解决方案

我用随机字符解决了与谷歌Chrome的无休止斗争。当您总是使用随机字符串呈现自动完成时,它将永远不会记住任何内容。

<input name="name" type="text" autocomplete="rutjfkde">

希望这对其他人有所帮助。

2022年更新:

Chrome做出了这一改进:autocomplete=“新密码”,这将解决这个问题,但我不确定,如果一段时间后Chrome再次将其更改为不同的功能。

我真不敢相信,这件事被报道了这么久,仍然是一个问题。以前的解决方案对我来说不起作用,因为Safari似乎知道元素何时不显示或不在屏幕上,但下面的解决方案确实对我起作用:

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

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

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

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

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

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

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