我遇到了chrome自动填充行为的几个形式的问题。
表单中的字段都有非常常见和准确的名称，例如“email”、“name”或“password”，并且它们还设置了autocomplete=“off”。
自动完成标志已经成功禁用了自动完成行为，当你开始输入时，会出现一个下拉的值，但没有改变Chrome自动填充字段的值。
这种行为是可以的，除了chrome填充输入不正确，例如填充电话输入与电子邮件地址。客户抱怨过这个问题，所以它被证实在很多情况下都发生了，而不是我在我的机器上本地操作的某种结果。
目前我能想到的唯一解决方案是动态生成自定义输入名称，然后在后端提取值，但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖，改变自动填充行为，可以用来解决这个问题?
当前回答
通过这个技巧，自动完成功能已经成功禁用。 它的工作原理!
[HTML]
<div id="login_screen" style="min-height: 45px;">
<input id="password_1" type="text" name="password">
</div>
(JQuery)
$("#login_screen").on('keyup keydown mousedown', '#password_1', function (e) {
let elem = $(this);
if (elem.val().length > 0 && elem.attr("type") === "text") {
elem.attr("type", "password");
} else {
setTimeout(function () {
if (elem.val().length === 0) {
elem.attr("type", "text");
elem.hide();
setTimeout(function () {
elem.show().focus();
}, 1);
}
}, 1);
}
if (elem.val() === "" && e.type === "mousedown") {
elem.hide();
setTimeout(function () {
elem.show().focus();
}, 1);
}
});
其他回答
如果显示:none不工作，这也是可能的，它似乎是工作的(Chrome v60.0.3112.113):
.hidden-fields {
opacity: 0;
float: left;
height: 0px;
width: 0px;
}
<input type="text" name="username" class="hidden-fields">
<input type="password" name="password" class="hidden-fields">
<your actual login fields></your actual login fields>
唯一适合我的方法是:(jQuery要求)
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
我也遇到过同样的问题。这里是禁用自动填充用户名和密码的Chrome解决方案(仅在Chrome上测试)
<!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
<input type="tel" hidden />
<input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">
我的解决方案:
$(function(){
$("form[autocomplete=off]").find('input').attr('autocomplete', 'false');
});
它在具有“autocomplete="off"”的表单中的所有输入字段上设置属性“autocomplete="false"”。
这适用于chrome, firefox和safari。
我遇到了“现在登录或注册”模式窗口的问题，如果用户已经将他们的凭据保存到浏览器中，这是一个问题。sign in和register字段都被填充了，所以我可以用下面的angular js指令来清除它们:
(function () { "use strict"; var directive = function ($timeout) { return { restrict: "A", link: function (scope, element, attrs) { $timeout(function () { element.val(" "); $timeout(function () { element.val(""); }); }); } }; }; angular.module("app.directives").directive("autofillClear", ["$timeout", directive]); }());
它基本上与之前使用jquery的一些答案相同，但以一种角度的方式完成。
