如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
只需每次将输入元素中的name属性更改为唯一的属性,它就不会再次自动完成!
一个例子可能是结尾处添加的时间tic。您的服务器只需要解析文本名称的第一部分即可检索回值。
<input type="password" name="password_{DateTime.Now.Ticks}" value="" />
其他回答
自动填充功能在不选择字段的情况下更改值。我们可以在状态管理中使用它来忽略选择事件之前的状态更改。
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框架。
我已经在这场永无止境的战斗中战斗了很久。。。所有的技巧和黑客最终都会停止工作,就像浏览器开发人员正在阅读这个问题一样。
我不想随机化域名,不想修改服务器端代码,不想使用JS重磅技巧,也不想将“黑客攻击”降至最低。下面是我想到的:
TL;DR使用完全没有名称或id的输入!并跟踪隐藏字段中的更改
<!-- input without the "name" or "id" -->
<input type="text" oninput="this.nextElementSibling.value=this.value">
<input type="hidden" name="email" id="email">
显然,可以在所有主要浏览器中使用。
P.S.已知的小问题:
您不能再通过id或名称引用此字段。但您可以使用CSS类。或者使用$(#email').prev();在jQuery中。或者想出另一个解决方案(有很多)。当以编程方式更改文本框值时,oninput和onchange事件不会触发。因此,相应地修改代码以反映隐藏字段中的更改。
Google Chrome忽略某些输入的autocomplete=“off”属性,包括密码输入和按名称检测的常见输入。
例如,如果您输入的是姓名地址,那么Chrome将根据其他网站上输入的地址提供自动填充建议,即使您告诉它不要这样做:
<input type="string" name="address" autocomplete="off">
如果您不希望Chrome这样做,那么可以重命名或命名表单字段的名称:
<input type="string" name="mysite_addr" autocomplete="off">
如果您不介意以前在站点上输入的自动完成值,那么可以保持启用自动完成。域名的名称间距应足以防止从其他站点记住的值出现。
<input type="string" name="mysite_addr" autocomplete="on">
简易黑客
使输入为只读
<input type="text" name="name" readonly="readonly">
超时后删除只读
$(function() {
setTimeout(function() {
$('input[name="name"]').prop('readonly', false);
}, 50);
});
不幸的是,大多数浏览器都删除了此选项,因此无法禁用密码提示。
直到今天,我还没有找到解决这个问题的好办法。我们现在剩下的是希望有一天这种选择会回来。
推荐文章
- HTML的“nonce”属性用于脚本和样式元素的目的是什么?
- 我如何在HTML中创建一个泪滴?
- 在另一个js文件中调用JavaScript函数
- 我怎么能强迫一个长字符串没有任何空白被包装?
- 在哪里放置JavaScript在HTML文件?
- 如何在引导栏中居中内容?
- IE8问题推特引导3
- 是否有可能使一个div 50px小于100%在CSS3?
- 如何限制谷歌自动完成结果的城市和国家
- 为什么CSS选择器/ HTML属性首选破折号?
- 如何在标题属性中转义双引号
- Safari和Chrome桌面浏览器无法自动播放视频
- 自动高度
- 如何将JavaScript文件链接到HTML文件?
- 正确的mime类型的SVG图像嵌入字体