如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
我正在四处寻找解决方案,但没有一个在所有浏览器上都能正常工作。
我尝试了自动完成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上测试。
其他回答
在尝试了所有解决方案之后(有些解决方案部分奏效,禁用自动填充但不自动完成,有些根本不奏效),我找到了截至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" />
对于React,您可以尝试将此代码放在表单下面或密码输入上面,或者放在电子邮件和密码输入之间
export const HackRemoveBrowsersAutofill = () => (
<>
<input type="email" autoComplete="new-password" style={ { display: 'none' } } />
<input type="password" autoComplete="new-password" style={ { display: 'none' } } />
</>
)
示例之一:
<input type="email"/>
<HackRemoveBrowsersAutofill/>
<input type="password"/>
有很多答案,但大多数都是破解或某种变通方法。
这里有三个案例。
案例一:如果这是你的标准登录表单。无论如何关闭它都可能是不好的。如果你真的需要这样做,请仔细考虑。用户习惯于浏览器记住和存储密码。在大多数情况下,你不应该改变这种标准行为。
如果你仍然想这样做,请参阅案例三
案例二:如果这不是您的常规登录表单,但输入的名称或id属性不是“像”电子邮件、登录名、用户名、用户名和密码。
Use
<input type="text" name="yoda" autocomplete="off">
案例三:如果这不是您的常规登录表单,但输入的名称或id属性是“类似”电子邮件、登录名、用户名、用户名和密码。
例如:登录,abc_login,密码,some_password,password_field。
所有浏览器都带有密码管理功能,可以记住密码或建议使用更强的密码。他们就是这样做的。
然而,假设你是一个网站的管理员,可以创建用户并设置他们的密码。在这种情况下,您不希望浏览器提供这些功能。
在这种情况下,autocomplete=“off”将不起作用。使用autocomplete=“新密码”
<input type="text" name="yoda" autocomplete="new-password">
有用链接:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
大多数答案都没有帮助,因为浏览器只是忽略了它们。(其中一些不兼容跨浏览器)。对我有效的修复方法是:
<form autocomplete="off">
<input type="text" autocomplete="new-password" />
<input type="password" autocomplete="new-password" />
</form>
我在表单标签上设置autofill=“off”,在不需要自动填充的地方设置autofil=“new password”。
浏览器忽略只读字段上的自动删除。这段代码使所有可写字段在聚焦之前都是只读的。
$(_=>{$('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>
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击