如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
我已经在这场永无止境的战斗中战斗了很久。。。所有的技巧和黑客最终都会停止工作,就像浏览器开发人员正在阅读这个问题一样。
我不想随机化域名,不想修改服务器端代码,不想使用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事件不会触发。因此,相应地修改代码以反映隐藏字段中的更改。
其他回答
我已经在这里发布了一个解决方案:禁用Chrome自动填充信用卡
解决方法是将自动完成属性设置为“cc csc”,该属性的值是信用卡的csc,并且不允许他们存储它!(目前…)
autocomplete="cc-csc"
最简单的答案是
<input autocomplete=“on | off”>
但请记住浏览器支持。当前,支持自动完成属性
铬17.0及最新版本IE 5.0及最新版本Firefox 4.0及最新版本Safari 5.2及最新版本Opera 9.6及最新版本
Chrome一直试图强制自动完成。所以你需要做一些事情。
输入字段的属性id和名称不需要是可识别的。所以没有姓名、电话、地址等值。
相邻的标签或div也需要不可识别。然而,您可能会想,用户如何知道?好吧,在使用内容后,您可以使用::做一个有趣的小技巧。你可以将其设置为字母。
<label>Ph<span class='o'></span>ne</label>
<input id='phnbr' name='phnbr' type='text'>
<style>
span.o {
content: 'o';
}
</style>
浏览器忽略只读字段上的自动删除。这段代码使所有可写字段在聚焦之前都是只读的。
$(_=>{$('form[autocomplete=off][name]:not([readonly])').map((i,t)=>$(t).prop('autocomplete',t.type=='密码'?'新密码':'ope').prop;})<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><form method=“post”autocomplete=“off”><input name=“user”id=“user”required class=“表单控件”/><label class=“form label”for=“user”>新用户</label><小时><input type=“password”name=“pass”id=“pass“minlength=”8“maxlength=“20”/><label class=“form label”for=“pass”>新Passwort</label></form>
提供的答案在我测试的所有浏览器上都不起作用。基于已经提供的答案,这是我最终在Chrome 61、Microsoft Edge 40(EdgeHTML 15)、IE 11、Firefox 57、Opera 49和Safari 5.1上测试的结果。由于多次试验,它很古怪;然而,它确实对我有用。
<form autocomplete="off">
...
<input type="password" readonly autocomplete="off" id="Password" name="Password" onblur="this.setAttribute('readonly');" onfocus="this.removeAttribute('readonly');" onfocusin="this.removeAttribute('readonly');" onfocusout="this.setAttribute('readonly');" />
...
</form>
<script type="text/javascript">
$(function () {
$('input#Password').val('');
$('input#Password').on('focus', function () {
if (!$(this).val() || $(this).val().length < 2) {
$(this).attr('type', 'text');
}
else {
$(this).attr('type', 'password');
}
});
$('input#Password').on('keyup', function () {
if (!$(this).val() || $(this).val().length < 2) {
$(this).attr('type', 'text');
}
else {
$(this).attr('type', 'password');
}
});
$('input#Password').on('keydown', function () {
if (!$(this).val() || $(this).val().length < 2) {
$(this).attr('type', 'text');
}
else {
$(this).attr('type', 'password');
}
});
</script>
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击