如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
这里提到的黑客在Chrome中没有一个对我有用。这里讨论了这个问题:https://code.google.com/p/chromium/issues/detail?id=468153#c41
将其添加到<form>中(至少目前如此):
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</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框架。
您可以在输入控件中使用autocomplete=off来避免自动完成
例如:
<input type=text name="test" autocomplete="off" />
如果上面的代码不起作用,那么也尝试添加这些属性
autocapitalize="off" autocomplete="off"
or
将输入类型属性更改为type=“search”。谷歌不会对搜索类型的输入应用自动填充。
用只读存储器贴出的答案很聪明,很管用。
但当我使用Bootstrap时,只读输入字段被标记为灰色背景,直到被聚焦。当文档加载时,您可以通过简单地锁定和解锁输入来欺骗浏览器。
因此,我有一个想法将其实现到jQuery解决方案中:
jQuery(document).ready(function () {
$("input").attr('readonly', true);
$("input").removeAttr('readonly');
});
您可以在输入中使用它。
例如
<input type=text name="test" autocomplete="off" />
这是浏览器现在忽略的安全问题。浏览器使用输入名称识别和存储内容,即使开发人员认为信息是敏感的,不应存储。
在两个请求之间设置不同的输入名称将解决问题(但仍将保存在浏览器的缓存中,并且还会增加浏览器的缓存)。
要求用户激活或停用浏览器设置中的选项不是一个好的解决方案。该问题可以在后端解决。
这是解决办法。所有自动完成的元素都是使用如下隐藏输入生成的:
<?php $r = md5(rand() . microtime(TRUE)); ?>
<form method="POST" action="./">
<input type="text" name="<?php echo $r; ?>" />
<input type="hidden" name="__autocomplete_fix_<?php echo $r; ?>" value="username" />
<input type="submit" name="submit" value="submit" />
</form>
然后,服务器像这样处理后置变量:(Demo)
foreach ($_POST as $key => $val) {
$newKey = preg_replace('~^__autocomplete_fix_~', '', $key, 1, $count);
if ($count) {
$_POST[$val] = $_POST[$newKey];
unset($_POST[$key], $_POST[$newKey]);
}
}
可以照常访问该值
echo $_POST['username'];
而且浏览器将无法从以前的请求或以前的用户那里建议信息。
即使浏览器更新其技术以忽略/尊重自动完成属性,这将继续有效。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击