ang*_*bie 4 autocomplete autofill angularjs
我在用于登录的部分页面中有以下代码...
<div class="container">
<form autocomplete="on" data-ng-submit="checkCredentials()" class="form-signin">
<h2 class="form-signin-heading">Login page</h2>
<label for="email"> <b>User e-mail</b> </label>
<input required autocomplete="on" name="email" type="text" data-ng-model="modelLogin.email" class="input-block-level" placeholder="Email address">
<label for="pass"> <b>Password</b> </label>
<input required autocomplete="on" name="pass" type="password" data-ng-model="modelLogin.password" class="input-block-level" placeholder="Password">
<button style="margin-bottom:1em" class="btn btn-large btn-primary" type="submit">Log in</button>
</form>
</div>
...这是我的唯一主页(index.html)中包含的ng:
<body data-ng-controller="controllerLogin">
<div data-ng-include="getMainpageBasedOnLoginStatus()">
</div>
</body>
...与getMainpageBasedOnLoginStatus()函数返回适当的路径要么对泛音/ loginPage.html上面所示或所述的partials/mainApplicationPage.html(我的主要的应用程序的入口点).通过ng-submit完成的checkCredentials()调用执行webservice调用以获取登录成功/失败,并在全局模型变量中进行正确更新 - 以便后续调用getMainpageBasedOnLoginStatus()返回'ok-you-are-登录页面(partials/mainApplicationPage.html).
此登录方案不能被黑客入侵,因为即使客户端代码以某种方式更改为指向主应用程序部分而不是登录部分,服务器端也将无法正常运行(Web服务请求将无法正常运行并返回406错误).
一切都很好 - 它的工作原理.除了...自动填充.
登录/密码字段既不会自动完成,也不会自动填充Chrome 29.在Firefox 23中也是如此:登录/密码字段未自动填充,但登录名(仅登录名,而不是密码名!)是自动填充的 - 但不是自动填充.
请注意,我在表单和两个输入中都使用了HTML5属性"autocomplete" - 没有任何结果.
谷歌搜索已经透露了其他面临相关问题的人(记住密码与AngularJS和ng-submit),没有回答......我无法回答这个问题(我太绿了,不过很明智).
AngularJS(https://github.com/angular/angular.js/issues/1460)上还有一张开放票,有7个月的时间,并讲述了自动填充实际上"工作"的人的相当悲惨的故事,浏览器方面,对于某些人来说,除了底层模型没有更新......以及来自某个名为"bigbag"的人的评论,该功能现在被禁用,因此.
我发现从AngularJS的角度来看这是相当不可接受的 - 当然我不是第一个需要在他的应用程序表单中自动填充/自动完成的人,是吗？或者我是否必须放弃单页理论并恢复到令人讨厌的表单操作并单独提供服务器端提供的login.html/main.html响应以使自动填充/自动完成工作？
任何最受赞赏和迫切需要的帮助/建议......
这是一个语义上合理的AngularJS解决方案:http://victorblog.com/2014/01/12/fixing-autocomplete-autofill-on-angularjs-form-submit/
myApp.directive('formAutofillFix', function() {
return function(scope, elem, attrs) {
// Fixes Chrome bug: https://groups.google.com/forum/#!topic/angular/6NlucSskQjY
elem.prop('method', 'POST');
// Fix autofill issues where Angular doesn't know about autofilled inputs
if(attrs.ngSubmit) {
setTimeout(function() {
elem.unbind('submit').submit(function(e) {
e.preventDefault();
elem.find('input, textarea, select').trigger('input').trigger('change').trigger('keydown');
scope.$apply(attrs.ngSubmit);
});
}, 0);
}
};
});
然后将指令附加到表单:
<form ng-submit="submitLoginForm()" form-autofill-fix>
<div>
<input type="email" ng-model="email" ng-required />
<input type="password" ng-model="password" ng-required />
<button type="submit">Log In</button>
</div>
</form>
| 归档时间： |
|
| 查看次数： |
14796 次 |
| 最近记录： |