AngularJS – 使用表单和自动完成

发布时间：2020-12-17 17:19:40 所属栏目：安全来源：网络整理

导读：我在用于登录的部分页面中有以下代码… div class="container" form autocomplete="on" data-ng-submit="checkCredentials()" class="form-signin" h2 class="form-signin-heading"Login page/h2 label for="email" bUser e-mail/b /label input required au

我在用于登录的部分页面中有以下代码…

<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()函数返回上面显示的partials / loginPage.html或partials / mainApplicationPage.html(我的主应用程序入口点)的相应路径.通过ng-submit完成的checkCredentials()调用执行webservice调用以获取登录成功/失败,并在全局模型变量中进行正确更新 – 以便后续调用getMainpageBasedOnLoginStatus()返回’ok-you-are-登录页面(partials / mainApplicationPage.html).

此登录方案不能被黑客入侵,因为即使客户端代码以某种方式更改为指向主应用程序部分而不是登录部分,服务器端也将无法正常运行(Web服务请求将无法正常运行并返回406错误).

一切都很好 – 它的工作原理.除了…自动填充.

请注意,我在表单和两个输入中都使用了HTML5属性“autocomplete” – 没有任何结果.

谷歌搜索已经揭露其他人面临相关问题(Remember Password with AngularJS and 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!