[英]Google Chrome issue: Model for input type 'password' not updated but 'text' does when browser autofills saved values
I have a login Form that is validated using Angular validation as follows: 我有一个使用Angular验证验证的登录表单,如下所示:
HTML for Input fields: 输入字段的HTML:
<input id="loginName" name="loginName" type="text" class="form-control" placeholder="Username" data-ng-model="loginName" data-ng-maxlength="246" required>
<input id="password" name="password" type="password" class="form-control" placeholder="Password" data-ng-model="password" data-ng-maxlength="246" required>
'Login' button is validated against loginName and password fields using angular validation. 使用角度验证对登录名和密码字段验证“登录”按钮。
In Google Chrome (other browsers behave as intended) when these fields are saved (with do you want to save username and password feature) when the page is refreshed, the model for input type 'text' -> $scope.loginName gets updated with the saved value on the other hand the model for input type 'password' -> $scope.password is always empty) and according to the validation logic form is declared invalid and the 'Login' button stays disabled even though both the input fields are populated with saved information (See first attached image). 在Google Chrome中(其他浏览器按预期行为)保存这些字段时(如果要保存用户名和密码功能)刷新页面时,输入类型“text” - > $ scope.loginName的模型会更新为另一方面,保存的值输入类型'password' - > $ scope.password的模型总是为空的)并且根据验证逻辑形式被声明为无效并且'Login'按钮保持禁用,即使两个输入字段都是填充了保存的信息(参见第一张附件)。
The moment a keypress or mouse click even occurs(not necessarily on the input fields but anywhere on the web page), somehow the model for password is updated and form is validated as shown in the second image attached. 即使按键或鼠标点击发生的那一刻(不一定在输入字段上,但在网页上的任何地方),不知何故更新密码模型并验证表格,如附加的第二张图片所示。
I tried using autofocus, custom autofocus directives, timeouts but it doesn't seem to work as intended. 我尝试使用自动对焦,自定义自动对焦指令,超时但它似乎没有按预期工作。
any suggestions, probably moving the cursor to the end of the text field so that the form knows that the text has been entered in the password field by the browser? 任何建议,可能是将光标移动到文本字段的末尾,以便表单知道浏览器在密码字段中输入了文本?
Came across this: AngularJS browser autofill workaround by using a directive 碰到这个: AngularJS浏览器通过使用指令自动填充解决方法
NOTE: All he answers in above solution talk about input elements value, got by either .val() or .value methods but the tricky part is both return undefined in case of password input field. 注意:他在上面的解决方案中回答的所有问题都是通过.val()或.value方法得到的输入元素值,但是在密码输入字段的情况下,棘手的部分都是未定义的。
But no luck! 但没有运气!
Thanks. 谢谢。
You may use 你可以用
$scope.$watch('modelValue',function(newVal,oldVal){
//your code action
});
which will keep on tracking the model value. 这将继续跟踪模型值。 Whenever the model has value, your code inside
$scope.$watch
will be triggered. 只要模型具有价值,就会触发
$scope.$watch
代码。
As suggested by Ziv Weissman (in the comments section above) and after wasting quite a few hours on this, I have abandoned the AngularJs style validation process for the Login button and the input type password as well. 正如Ziv Weissman(在上面的评论部分中)所建议的那样,在浪费了相当多的时间之后,我放弃了Login按钮的AngularJs样式验证过程以及输入类型密码。
Chrome pretends it does not have a value for the field as a security measure. Chrome假装它没有该字段的值作为安全措施。 There's no way to hack around that.
没有办法解决这个问题。 from: here
来自: 这里
我找到了这种行为的潜在解决方案 ,包括在延迟后重新捕获密码值。
Just add this directive,and call the directive from the input's 只需添加此指令,并从输入中调用该指令
Directive code 指令代码
Modeule.directive('autoComplete', function ($timeout) {
return function (scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function () {
$timeout(function () {
iElement.trigger('input');
}, 0);
}
});
};
});
HTML code HTML代码
<input type="text" ng-model="username" auto-complete />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.