如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
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">
其他回答
自动填充功能在不选择字段的情况下更改值。我们可以在状态管理中使用它来忽略选择事件之前的状态更改。
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框架。
正如其他人所说,答案是autocomplete=“off”。
然而,我认为有必要说明为什么在某些情况下使用此选项是一个好主意,因为对此问题和重复问题的一些答案表明,最好不要关闭此选项。
停止存储信用卡号的浏览器不应该留给用户。太多的用户甚至不会意识到这是一个问题。
在信用卡安全码字段上关闭它尤为重要。如本页所述:
“永远不要存储安全码……它的价值取决于这样一种假设,即提供安全码的唯一方法是从实体信用卡中读取安全码,以证明提供该安全码的人实际上持有该卡。”
问题是,如果是公共计算机(网吧、图书馆等),其他用户很容易窃取您的卡信息,甚至在您自己的计算机上,恶意网站也可能窃取自动完成的数据。
我一直在尝试无尽的解决方案,然后我发现:
不用autocomplete=“off”,只需使用autocomplete==“false”
就这么简单,它在谷歌Chrome中也很有魅力!
关于InternetExplorer11,有一个安全功能可以用来阻止自动完成。
它的工作原理如下:
用户输入后在JavaScript中修改的任何表单输入值都被标记为不符合自动完成的条件。
此功能通常用于保护用户免受恶意网站的攻击,这些网站在您输入密码或类似内容后想要更改密码。
但是,您可以在密码字符串的开头插入一个特殊字符来阻止自动完成。这个特殊字符可以被检测到,并在以后的管道中被删除。
除了
autocomplete="off"
使用
readonly onfocus="this.removeAttribute('readonly');"
对于不希望他们记住表单数据(用户名、密码等)的输入,如下所示:
<input type="text" name="UserName" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
推荐文章
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 点击下载Href图片链接
- HtmlSpecialChars在JavaScript中等价于什么?
- 我如何删除背景图像在css?
- 如何克服HTML表单嵌套的限制?
- 如何使Bootstrap 4卡在卡列相同的高度?
- 使用域集图例引导
- 音频停止功能