如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
在尝试了所有解决方案之后(有些解决方案部分奏效,禁用自动填充但不自动完成,有些根本不奏效),我找到了截至2020年的最佳解决方案,将type=“search”和autocomplete=“off”添加到输入元素中。这样地:
<input type="search" /> or <input type="search" autocomplete="off" />
还要确保表单元素具有autocomplete=“off”。这非常有效,并禁用自动完成和自动填充。
此外,如果您使用type=“email”或任何其他文本类型,则需要添加autocomplete=“new email”,这将完全禁用两者。type=“password”也是如此。只需将“new-”前缀与类型一起添加到自动完成中即可。这样地:
<input type="email" autocomplete="new-email" />
<input type="password" autocomplete="new-password" />
其他回答
很确定这是目前最通用的解决方案
这将停止自动完成和弹出的建议框。
简介
让我们面对现实,自动完成=关闭或新密码似乎不起作用。这是应该做的,但却没有,每周我们都会发现其他事情发生了变化,浏览器会用我们不想要的更多随机垃圾填写表单。我发现了一个非常简单的解决方案,它不需要在登录页面上自动完成。
如何实施
步骤1)。将相同的函数调用添加到用户名和密码字段的onmousedown和onkeyup属性,确保为它们提供一个id,并在函数调用结束时记录代码。md=mousedown和ku=keyup
对于用户名字段,仅添加值;因为这防止了表单在进入页面时自动填充。
例如:
<input type=“text”value=“ ;”id=“myusername”onmousedown=“protectMe(this,'md')”onkeyup=“protectMe(this,'ku')”/>
步骤2)。在页面上包含此功能
功能保护Me(el,action){//删除启动时注入的空白var v=el.value.trim();//如果我们正在键入内容,请忽略此重置过程//并且只在最后一次删除时确认按键//我们这样做会导致表单值为空如果(action=='ku'&&v!=''){return;}//修复了将outerHTML写回自身所导致的双引号问题(在表单输入中)v=v.replace(/“/g,'\\”');//通过重新编写表单,重置单击表单进入焦点时出现的弹出窗口el.outerHTML=el.outrHTML;//发出指令重新调整焦点,插入重置之前存在的值,然后选择内容。setTimeout(“var d=document.getElementById('“+el.id+”');d.value=\“”+v+“\”;d.focus();if(d.value.length>1){d.select();}”,100);}
它做什么?
首先,它添加了;字段的空格,以便浏览器尝试查找与此相关的详细信息,但未找到任何内容,因此自动完成固定其次,当您单击时,将再次创建HTML,取消弹出窗口,然后重新选择值。最后,当您使用delete按钮删除字符串时,弹出窗口通常会再次出现,但如果我们达到该点,则keyup检查会重复该过程。
问题是什么?
点击选择一个字符是一个问题,但对于登录页面,大多数人会原谅它选择了所有文本Javascript确实会删除任何空格的输入,但为了安全起见,您可能也希望在服务器端这样做
能更好吗?
可能是的。这只是我测试过的东西,它满足了我的基本需求,但可能还有更多的技巧需要添加,或者有更好的方法来应用所有这些。
已测试的浏览器
截至本发布日期,已在最新的Chrome、Firefox和Edge上测试和工作
您可以在属性name how电子邮件地址中向表单添加名称,并生成电子邮件值。例如:
<form id="something-form">
<input style="display: none" name="email" value="randomgeneratevalue"></input>
<input type="password">
</form>
如果使用此方法,Google Chrome将无法插入自动填充密码。
浏览器忽略只读字段上的自动删除。这段代码使所有可写字段在聚焦之前都是只读的。
$(_=>{$('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>
我正在四处寻找解决方案,但没有一个在所有浏览器上都能正常工作。
我尝试了自动完成off、none、nope、new_input_64(甚至是一些有趣的文本),因为autocomplete属性希望传递字符串,无论是什么。
经过多次搜索和尝试,我找到了这个解决方案。
我将所有输入类型都改为文本,并添加了一些简单的CSS代码。
以下是表格:
<form class="row gy-3">
<div class="col-md-12">
<label for="fullname" class="form-label">Full Name</label>
<input type="text" class="form-control" id="fullname" name="fullname" value="">
</div>
<div class="col-md-6">
<label for="username" class="form-label">User Name</label>
<input type="text" class="form-control" id="username" name="username" value="">
</div>
<div class="col-md-6">
<label for="email" class="form-label">Email</label>
<input type="text" class="form-control" id="email" name="email" value="">
</div>
<div class="col-md-6">
<label for="password" class="form-label">Password</label>
<input type="text" class="form-control pswd" id="password" name="password" value="">
</div>
<div class="col-md-6">
<label for="password" class="form-label">Confirm Password</label>
<input type="text" class="form-control pswd" id="password" name="password" value="">
</div>
<div class="col-md-12">
<label for="recaptcha" class="form-label">ReCaptcha</label>
<input type="text" class="form-control" id="recaptcha" name="recaptcha" value="">
</div>
</form>
隐藏密码的CSS代码:
.pswd {
-webkit-text-security: disc;
}
在Chrome、Opera和Edge上测试。
我尝试了几乎所有的答案,但新版本的Chrome很聪明;如果你写
autocomplete="randomstring" or autocomplete="rutjfkde"
它会自动将其转换为
autocomplete="off"
当输入控件接收到焦点时。
所以,我使用jQuery完成了这项工作,我的解决方案如下。
$("input[type=text], input[type=number], input[type=email], input[type=password]").focus(function (e) {
$(this).attr("autocomplete", "new-password");
})
这是最简单的,对于表单上的任何数量的控件都可以做到。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击