如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?


当前回答

在尝试了所有解决方案之后(有些解决方案部分奏效,禁用自动填充但不自动完成,有些根本不奏效),我找到了截至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=“&nbsp;”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");
})

这是最简单的,对于表单上的任何数量的控件都可以做到。