在angularjs中支撑浏览器自动填表的特征

2019年8月26日 208次阅读 来源: 时允

近来有许多前端同砚都埋怨说，上岸表单都不能纪录本身的账号。这关于用单页面(single-page applications)和运用ajax比较多的网页来讲，照样一个蛮广泛的题目。

UserApp是一个运用angularjs构建的WebApp，然则他一向未能支撑浏览器的”save password”特征。
下面就列出了一些发明的题目：

  1. 表单不能用js动态的插进去DOM。
  2. 表单必需真正的发出一个POST要求。（不能猎取表单内容，然后用ajax发出要求）
  3. 当浏览器自动填表后，$scope并不能取得更新后的数据。

Firefox相对来讲简朴一点，只需表单元素有name属性，触发提交事宜以后，它就会自动提醒用户是不是纪录数据。

<form name="login-form" ng-submit="login()">
    <input id="login" name="login" type="text" ng-model="user.login">
    <input id="password" name="password" type="password" ng-model="user.password">
</form>

《在angularjs中支撑浏览器自动填表的特征》

然则firefox有一个题目，在自动填表以后，$scope里的数据并不会更新。所以我google了一下，发明了一些针对此题目的hacks。然则总觉得这些解决方案没必要，由于我须要的只是在提交表单的时刻将数据带上，而不是一些很溜逼的数据双向绑定手艺。所以我就采用了很简朴的要领：在提交表单的时刻猎取表单元素的值。

$scope.login = function() {
    $scope.user = {
        login: $("#login").val(),
        password: $("#password").val()
    };
    ...
    return false;
};

OK,如今firefox没题目了，然则chrome怎么办呢？

chrome只要在form表单真正提议POST要求的时刻才会提醒用户是不是贮存暗码，但如许的话就不能用Ajax操作了。

下面是解决要领：

  1. 当表单发出Post要求时，用ng-submit截取，返回false将其阻挠，同时用ajax提交数据。
  2. 当ajax胜利返回时，将session贮存在cookies里，再将表单从新提交一边。
  3. 页面重载的时刻会发明已认证过了，就将其重定向到主页。

这会让页面革新一次，但也就是登录的时刻须要革新罢了，确保页面返回时是同一个地点就好了。
但假如表单是被动态增加进DOM的时刻，这个要领依然不可。解决方案就是在index.html中增加一个隐蔽的表单，须要提交数据的时刻就将别的表单照顾的数据复制到隐蔽表单里。

我将它打包成了一个directive：

app.directive("ngLoginSubmit", function(){
return {
    restrict: "A",
    scope: {
        onSubmit: "=ngLoginSubmit"
    },
    link: function(scope, element, attrs) {
        $(element)[0].onsubmit = function() {
            $("#login-login").val($("#login", element).val());
            $("#login-password").val($("#password", element).val());

            scope.onSubmit(function() {
                $("#login-form")[0].submit();
            });
            return false;
        };
    }
};
});

在index.html里隐蔽的表单：

<form name="login-form" id="login-form" method="post" action="" style="display: none;">
    <input name="login" id="login-login" type="text">
    <input name="password" id="login-password" type="password">
</form>

暂时登录表单

<form name="login-form" autocomplete="on" ng-login-submit="login">
    <input id="login" name="login" type="text" autocomplete="on">
    <input id="password" name="password" type="password" autocomplete="on">
</form>

登任命的controller:

$scope.login = function(submit) {
    $scope.user = {
        login: $("#login").val(),
        password: $("#password").val()
    };

    function ajaxCallback() {
        submit();
    }   

    return false;
};

《在angularjs中支撑浏览器自动填表的特征》

如今这个题目解决了，然则每当你按下f5的时刻，浏览器都邑提醒你要不要从新提交表单。这确切有点蛋疼，所以我增加了一个pre-login.html文件，隐蔽的表单会提交数据到这里，然后再重定向到index.html。

如今OK了～

原文地点

    原文作者：时允
    原文地址: https://segmentfault.com/a/1190000000383733
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞