如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
如果您在JavaScript中动态设置autocomplete=“off”,Safari不会改变对自动完成的看法。然而,如果您在每个字段的基础上执行此操作,则会受到尊重。
$(':input', $formElement).attr('autocomplete', 'off');
其他回答
用只读存储器贴出的答案很聪明,很管用。
但当我使用Bootstrap时,只读输入字段被标记为灰色背景,直到被聚焦。当文档加载时,您可以通过简单地锁定和解锁输入来欺骗浏览器。
因此,我有一个想法将其实现到jQuery解决方案中:
jQuery(document).ready(function () {
$("input").attr('readonly', true);
$("input").removeAttr('readonly');
});
我的解决方案是使用angular js指令动态更改文本输入类型它就像魅力一样
首先添加2个隐藏文本字段
然后添加一个像这样的角度指令
(function () {
'use strict';
appname.directive('changePasswordType', directive);
directive.$inject = ['$timeout', '$rootScope', '$cookies'];
function directive($timeout, $rootScope, $cookies) {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link(scope,element) {
var process = function () {
var elem =element[0];
elem.value.length > 0 ? element[0].setAttribute("type", "password") :
element[0].setAttribute("type", "text");
}
element.bind('input', function () {
process();
});
element.bind('keyup', function () {
process();
});
}
}
})()
然后在需要阻止自动完成的文本字段中使用它
<input type="text" style="display:none">\\can avoid this 2 lines
<input type="password" style="display:none">
<input type="text" autocomplete="new-password" change-password-type>
注意:不要忘记包含jquery,并在开始时设置type=“text”
您可以在输入控件中使用autocomplete=off来避免自动完成
例如:
<input type=text name="test" autocomplete="off" />
如果上面的代码不起作用,那么也尝试添加这些属性
autocapitalize="off" autocomplete="off"
or
将输入类型属性更改为type=“search”。谷歌不会对搜索类型的输入应用自动填充。
要防止浏览器自动填充用户保存的站点登录凭据,请在表单顶部放置一个文本和密码输入字段,该字段具有非空值,并设置样式“position:aabsolute;top:-999px;left:-999px”以隐藏字段。
<form>
<input type="text" name="username_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
<input type="password" name="password_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
<!-- Place the form elements below here. -->
</form>
在密码字段之前有一个文本字段很重要。否则,在某些情况下可能无法阻止自动填充。
重要的是文本和密码字段的值不能为空,以防止在某些情况下覆盖默认值。
这两个字段必须在表单中的“真实”密码类型字段之前。
对于兼容html 5.3的较新浏览器,自动完成属性值“新密码”应该有效。
<form>
<input type="text" name="username" value="" />
<input type="password" name="password" value="" autocomplete="new-password" />
</form>
这两种方法的组合可用于支持较旧和较新的浏览器。
<form>
<div style="display:none">
<input type="text" readonly tabindex="-1" />
<input type="password" readonly tabindex="-1" />
</div>
<!-- Place the form elements below here. -->
<input type="text" name="username" value="" />
<input type="password" name="password" value="" autocomplete="new-password" />
</form>
如果仅自动完成=“off”不起作用,也可以尝试以下操作:
autocorrect="off" autocapitalize="off" autocomplete="off"
推荐文章
- HTML的“nonce”属性用于脚本和样式元素的目的是什么?
- 我如何在HTML中创建一个泪滴?
- 在另一个js文件中调用JavaScript函数
- 我怎么能强迫一个长字符串没有任何空白被包装?
- 在哪里放置JavaScript在HTML文件?
- 如何在引导栏中居中内容?
- IE8问题推特引导3
- 是否有可能使一个div 50px小于100%在CSS3?
- 如何限制谷歌自动完成结果的城市和国家
- 为什么CSS选择器/ HTML属性首选破折号?
- 如何在标题属性中转义双引号
- Safari和Chrome桌面浏览器无法自动播放视频
- 自动高度
- 如何将JavaScript文件链接到HTML文件?
- 正确的mime类型的SVG图像嵌入字体