问题描述
我有一个简单的登录表单,除非您使用Chrome的自动完成功能,工作只是桃色。
如果你开始打字和使用的自动完成功能,并自动填充您的密码,我angularjs模型没有输入密码的任意值。
我试着通过设置该属性的形式自动完成=关闭
上打开自动完成关闭,但似乎没有任何效果。
我怎样才能既:
1.确保我可以得到价值,如果有人使用Chrome的自动完成功能?
2.禁用Chrome的自动完成功能?
<窗体类=形式登入NAME =形式NG提交=登陆()自动完成=关闭> < H3>登录和LT; / H3 GT&; <输入类型=电子邮件NAME =电子邮件级=表格控占位=电子邮件地址NG模型=user.email所需的自动对焦>
<输入类型=密码NAME =密码级=表格控占位=密码NG模型=user.password的要求> <按钮类=BTN BTN-LG BTN-主要BTN-块类型=提交>登录< /按钮> < /表及GT;
从注释添加链接:https://github.com/angular/angular.js/issues/1460#issuecomment-32491109
//由于浏览器的问题,这是不可能没有超时检测自动填充输入任何改变
// https://github.com/angular/angular.js/issues/1460
// https://github.com/angular/angular.js/issues/1460#issuecomment-28662156
//可能会破坏未来的角度版本(如果使用`编译()`代替`链接())
// TODO支持选择
angular.module(应用程序)。配置([$提供功能($提供){
VAR inputDecoration =$代表,inputsWatcher功能($代表,inputsWatcher){
变种指令= $代表[0];
VAR链接= directive.link; 功能linkDecoration(范围,元素,ATTRS,ngModel){
VAR处理程序;
//默认模式。$ viewValue是等于未定义
如果(attrs.type ==复选框){
inputsWatcher.registerInput(处理器=函数(){
VAR值=元素[0] .checked;
//默认元素没有被选中
如果(价值和放大器;&安培;!ngModel $ viewValue ==值){
ngModel $ setViewValue(值)。
}
});
}否则如果(attrs.type ==单选){
inputsWatcher.registerInput(处理器=函数(){
VAR值= attrs.value;
//默认元素没有被选中
如果(元素[0] .checked&放大器;&安培; ngModel $ viewValue ==值!){
ngModel $ setViewValue(值)。
}
});
}其他{
inputsWatcher.registerInput(处理器=函数(){
VAR值= element.val();
//默认值是一个空字符串
如果(($ ngModel == viewValue不确定||值==)及。!&安培;!ngModel $ viewValue ==值){
ngModel $ setViewValue(值)。
}
});
} (范围。在$($消灭,功能){
inputsWatcher.unregisterInput(处理);
}); // Exec的原始链接`()`
link.apply(在此,[] .slice.call(参数,0));
} //装饰`链接()`没有为`inputDirective`工作(为什么?)
/ *
directive.link = linkDecoration;
* /
//所以使用`编译()`代替
directive.compile =函数编译(元素,ATTRS,transclude){
返回linkDecoration;
};
删除directive.link; 返回$代表;
}]; $ provide.decorator(inputDirective,inputDecoration);
$ provide.decorator(textareaDirective,inputDecoration);
// TODO装饰selectDirective(见约束力的变为`单()`和`多()`)
}])。工厂(inputsWatcher,[$间隔,$ rootScope功能($区间,$ rootScope){
VAR INTERVAL_MS = 500;
VAR的承诺;
无功处理= []; 功能execHandlers(){
对于(VAR I = 0,1 = handlers.length; I<升;我++){
处理器[I]();
}
} 返回{
registerInput:功能registerInput(处理){
如果(handlers.push(处理器)== 1){
诺= $区间(execHandlers,INTERVAL_MS);
}
},
unregisterInput:功能unregisterInput(处理){
handlers.splice(handlers.indexOf(处理器),1);
如果(handlers.length == 0){
$ interval.cancel(承诺);
}
}
}
}]);
I have a simple login form which works just peachy unless you use Chrome's auto complete feature.
If you start typing and use the auto complete feature and it auto populates your password, my angularjs model does not have any value for the password.
I tried to turn autocomplete off by setting the attribute on the form autocomplete="off"
but that doesn't seem to have any effect.
How can I either:1. Ensure that I can get the value if someone uses Chrome's auto-complete feature?2. Disable Chrome's auto-complete feature?
<form class="form-signin" name="form" ng-submit="login()" autocomplete="off">
<h3>Login</h3>
<input type="email" name="email" class="form-control" placeholder="Email address" ng-model="user.email" required autofocus>
<input type="password" name="password" class="form-control" placeholder="Password" ng-model="user.password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
From the link added in the comment: https://github.com/angular/angular.js/issues/1460#issuecomment-32491109
// Due to browsers issue, it's impossible to detect without a timeout any changes of autofilled inputs
// https://github.com/angular/angular.js/issues/1460
// https://github.com/angular/angular.js/issues/1460#issuecomment-28662156
// Could break future Angular releases (if use `compile()` instead of `link())
// TODO support select
angular.module("app").config(["$provide", function($provide) {
var inputDecoration = ["$delegate", "inputsWatcher", function($delegate, inputsWatcher) {
var directive = $delegate[0];
var link = directive.link;
function linkDecoration(scope, element, attrs, ngModel){
var handler;
// By default model.$viewValue is equals to undefined
if(attrs.type == "checkbox"){
inputsWatcher.registerInput(handler = function(){
var value = element[0].checked;
// By default element is not checked
if (value && ngModel.$viewValue !== value) {
ngModel.$setViewValue(value);
}
});
}else if(attrs.type == "radio"){
inputsWatcher.registerInput(handler = function(){
var value = attrs.value;
// By default element is not checked
if (element[0].checked && ngModel.$viewValue !== value) {
ngModel.$setViewValue(value);
}
});
}else{
inputsWatcher.registerInput(handler = function(){
var value = element.val();
// By default value is an empty string
if ((ngModel.$viewValue !== undefined || value !== "") && ngModel.$viewValue !== value) {
ngModel.$setViewValue(value);
}
});
}
scope.$on("$destroy", function(){
inputsWatcher.unregisterInput(handler);
});
// Exec original `link()`
link.apply(this, [].slice.call(arguments, 0));
}
// Decorate `link()` don't work for `inputDirective` (why?)
/*
directive.link = linkDecoration;
*/
// So use `compile()` instead
directive.compile = function compile(element, attrs, transclude){
return linkDecoration;
};
delete directive.link;
return $delegate;
}];
$provide.decorator("inputDirective", inputDecoration);
$provide.decorator("textareaDirective", inputDecoration);
//TODO decorate selectDirective (see binding "change" for `Single()` and `Multiple()`)
}]).factory("inputsWatcher", ["$interval", "$rootScope", function($interval, $rootScope){
var INTERVAL_MS = 500;
var promise;
var handlers = [];
function execHandlers(){
for(var i = 0, l = handlers.length; i < l; i++){
handlers[i]();
}
}
return {
registerInput: function registerInput(handler){
if(handlers.push(handler) == 1){
promise = $interval(execHandlers, INTERVAL_MS);
}
},
unregisterInput: function unregisterInput(handler){
handlers.splice(handlers.indexOf(handler), 1);
if(handlers.length == 0){
$interval.cancel(promise);
}
}
}
}]);
这篇关于Angularjs铬自动完成困境的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!