如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
三个选项:
第一:
<input type='text' autocomplete='off' />
第二:
<form action='' autocomplete='off'>
第三个(JavaScript代码):
$('input').attr('autocomplete', 'off');
其他回答
Chrome一直试图强制自动完成。所以你需要做一些事情。
输入字段的属性id和名称不需要是可识别的。所以没有姓名、电话、地址等值。
相邻的标签或div也需要不可识别。然而,您可能会想,用户如何知道?好吧,在使用内容后,您可以使用::做一个有趣的小技巧。你可以将其设置为字母。
<label>Ph<span class='o'></span>ne</label>
<input id='phnbr' name='phnbr' type='text'>
<style>
span.o {
content: 'o';
}
</style>
我已经在这里发布了一个解决方案:禁用Chrome自动填充信用卡
解决方法是将自动完成属性设置为“cc csc”,该属性的值是信用卡的csc,并且不允许他们存储它!(目前…)
autocomplete="cc-csc"
自动填充功能在不选择字段的情况下更改值。我们可以在状态管理中使用它来忽略选择事件之前的状态更改。
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框架。
最简单的答案是
<input autocomplete=“on | off”>
但请记住浏览器支持。当前,支持自动完成属性
铬17.0及最新版本IE 5.0及最新版本Firefox 4.0及最新版本Safari 5.2及最新版本Opera 9.6及最新版本
您可以在属性name how电子邮件地址中向表单添加名称,并生成电子邮件值。例如:
<form id="something-form">
<input style="display: none" name="email" value="randomgeneratevalue"></input>
<input type="password">
</form>
如果使用此方法,Google Chrome将无法插入自动填充密码。