如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
我正在四处寻找解决方案,但没有一个在所有浏览器上都能正常工作。
我尝试了自动完成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上测试。
其他回答
这将解决此问题
autocomplete="new-password"
除了
autocomplete="off"
使用
readonly onfocus="this.removeAttribute('readonly');"
对于不希望他们记住表单数据(用户名、密码等)的输入,如下所示:
<input type="text" name="UserName" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
Firefox 30忽略密码的autocomplete=“off”,而是选择提示用户密码是否应存储在客户端上。请注意2014年5月5日的以下评论:
密码管理器始终提示是否要保存密码。未经用户许可,密码不会保存。我们是继IE和Chrome之后第三个实现这一改变的浏览器。
根据Mozilla开发者网络文档,布尔表单元素属性autocomplete防止表单数据在旧浏览器中缓存。
<input type="text" name="foo" autocomplete="off" />
提供的答案在我测试的所有浏览器上都不起作用。基于已经提供的答案,这是我最终在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>
为字段使用非标准的名称和id,因此“name”不是“name_”。浏览器将不会将其视为名称字段。
最好的一点是,您可以对某些但不是所有字段执行此操作,并且它将自动完成某些但不是全部字段。
推荐文章
- 编辑和重放XHR chrome/firefox等?
- 使用JavaScript显示/隐藏'div'
- 如何用CSS“裁剪”一个矩形图像成一个正方形?
- 使用JavaScript获取所选的选项文本
- AngularJS模板中的三元运算符
- HTML编码问题-显示“”字符而不是“ ”
- 嵌入YouTube视频-拒绝在帧中显示,因为它将“X-Frame-Options”设置为“SAMEORIGIN”
- 添加HTML到容器元素中,不包含innerHTML
- 如何使用jQuery添加' style=display:"block" '到一个元素?
- 在HTML中,我可以用✓做一个复选标记;. 有相应的x标记吗?
- 我可以将CSS样式应用于元素名称吗?
- 我怎么能发送一个内部<div>到它的父<div>底部?
- 改变引导输入焦点蓝色发光
- 我如何使一个div上的滚动条只在必要时可见?
- HTML5 iFrames的替代方案