让angularjs支持浏览器自动填表  更新时间:2014年11月10日 11:26:53   投稿:hebedich   简单来说Angular.js是google开发者设计和开发的一套前端开发框架,帮助你简化前端开发的负担。当然,这里有很多其它的前端开发框架,但是如何选择合适的前端框架对于我们这些开发人员来说就不是那么容易了! 最近有很多前端同学都抱怨说,登陆表单都不能记录自己的账号。这对于用单页面(single-page applications)和使用ajax比较多的网页来说,还是一个蛮普遍的问题。 UserApp是一个使用angularjs构建的WebApp,但是他一直未能支持浏览器的”save password”特性。 下面就列出了一些发现的问题: 表单不能用js动态的插入DOM。 表单必须真正的发出一个POST请求。(不能获取表单内容,然后用ajax发出请求) 当浏览器自动填表后,$scope并不能获得更新后的数据。 Firefox相对来说简单一点,只要表单元素有name属性,触发提交事件之后,它就会自动提醒用户是否记录数据。 复制代码 代码如下:         firefox记录数据的要求比较简单 但是firefox有一个问题,在自动填表之后,$scope里的数据并不会更新。所以我google了一下,发现了一些针对此问题的hacks。但是总感觉这些解决方案没必要,因为我需要的只是在提交表单的时候将数据带上,而不是一些很溜逼的数据双向绑定技术。所以我就采用了很简单的办法:在提交表单的时候获取表单元素的值。 复制代码 代码如下: $scope.login = function() {     $scope.user = {         login: $(“#login”).val(),         password: $(“#password”).val()     };     …     return false; }; OK,现在firefox没问题了,但是chrome怎么办呢? chrome只有在form表单真正发起POST请求的时候才会提示用户是否储存密码,但这样的话就不能用Ajax操作了。 下面是解决办法: 当表单发出Post请求时,用ng-submit截取,返回false将其阻止,同时用ajax提交数据。 当ajax成功返回时,将session储存在cookies里,再将表单重新提交一边。 页面重载的时候会发现已经认证过了,就将其重定向到主页。 这会让页面刷新一次,但也就是登录的时候需要刷新而已,确保页面返回时是同一个地址就行了。 但如果表单是被动态添加进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里隐藏的表单: 复制代码 代码如下:         临时登录表单 复制代码 代码如下:         登录用的controller: 复制代码 代码如下: $scope.login = function(submit) {     $scope.user = {         login: $(“#login”).val(),         password: $(“#password”).val()     };     function ajaxCallback() {         submit();     }       return false; }; 刷新时会提示是否重新提交表单 现在这个问题解决了,但是每当你按下f5的时候,浏览器都会提醒你要不要重新提交表单。这确实有点蛋疼,所以我添加了一个pre-login.html文件,隐藏的表单会提交数据到这里,然后再重定向到index.html。 现在OK了~ 您可能感兴趣的文章: angularjs实现与服务器交互分享 AngularJS实现表单验证 angularJS中router的使用指南 angularJS提交表单(form) angularJS 中input示例分享 angularjs 自动填表 相关文章 AngularJS实现select的ng-options功能示例 这篇文章主要介绍了AngularJS实现select的ng-options功能,结合实例形式分析了AngularJS使用ng-options操作select列表的相关实现技巧,需要的朋友可以参考下 2017-07-07 AngularJS 服务详细讲解及示例代码 本文主要介绍AngularJS 服务,这里整理了AngularJS 服务的基本知识资料,并附示例代码和实现效果图,有兴趣的小伙伴可以参考下 2016-08-08 解决angular2在双向数据绑定时[(ngModel)]无法使用的问题 今天小编就为大家分享一篇解决angular2在双向数据绑定时[(ngModel)]无法使用的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 详解Angular的双向数据绑定(MV-VM) 本文主要对Angular的双向数据绑定(MV-VM)进行实例分析,具有一定的参考价值,下面跟着小编一起来看下吧 2016-12-12 AngularJS指令中的绑定策略实例分析 这篇文章主要介绍了AngularJS指令中的绑定策略,结合实例形式分析了scope绑定策略的分类与具体实现方法,需要的朋友可以参考下 2016-12-12 AngularJS上传文件的示例代码 上传文件在很多时候都能用到,这篇文章主要介绍了AngularJS上传文件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-11-11 angularjs学习笔记之三大模块(modal,controller,view) 本文给大家记录的是angularjs的三大模块(modal,controller,view)的使用说明,方便初学者能够顺利的学习angularjs. 2015-09-09 AngularJS 中的数据源的循环输出 这篇文章主要介绍了AngularJS 中的数据源的循环输出的相关资料,希望通过本文能帮助到大家,实现这样的功能,需要的朋友可以参考下 2017-10-10 AngularJS 文件上传控件 ng-file-upload详解 这篇文章主要介绍了AngularJS 文件上传控件 ng-file-upload详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-01-01 AngularJS路由Ui-router模块用法示例 这篇文章主要介绍了AngularJS路由Ui-router模块用法,结合实例形式分析了Ui-router模块的功能、使用方法及相关注意事项,需要的朋友可以参考下 2017-05-05 最新评论

最近有很多前端同学都抱怨说,登陆表单都不能记录自己的账号。这对于用单页面(single-page applications)和使用ajax比较多的网页来说,还是一个蛮普遍的问题。

UserApp是一个使用angularjs构建的WebApp,但是他一直未能支持浏览器的”save password”特性。
下面就列出了一些发现的问题:

表单不能用js动态的插入DOM。
表单必须真正的发出一个POST请求。(不能获取表单内容,然后用ajax发出请求)
当浏览器自动填表后,$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>

firefox记录数据的要求比较简单

但是firefox有一个问题,在自动填表之后,$scope里的数据并不会更新。所以我google了一下,发现了一些针对此问题的hacks。但是总感觉这些解决方案没必要,因为我需要的只是在提交表单的时候将数据带上,而不是一些很溜逼的数据双向绑定技术。所以我就采用了很简单的办法:在提交表单的时候获取表单元素的值。

复制代码 代码如下:

$scope.login = function() {

    $scope.user = {

        login: $(“#login”).val(),

        password: $(“#password”).val()

    };

    …

    return false;

};

OK,现在firefox没问题了,但是chrome怎么办呢?

chrome只有在form表单真正发起POST请求的时候才会提示用户是否储存密码,但这样的话就不能用Ajax操作了。

下面是解决办法:

当表单发出Post请求时,用ng-submit截取,返回false将其阻止,同时用ajax提交数据。
当ajax成功返回时,将session储存在cookies里,再将表单重新提交一边。
页面重载的时候会发现已经认证过了,就将其重定向到主页。
这会让页面刷新一次,但也就是登录的时候需要刷新而已,确保页面返回时是同一个地址就行了。
但如果表单是被动态添加进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;
};

刷新时会提示是否重新提交表单

现在这个问题解决了,但是每当你按下f5的时候,浏览器都会提醒你要不要重新提交表单。这确实有点蛋疼,所以我添加了一个pre-login.html文件,隐藏的表单会提交数据到这里,然后再重定向到index.html。

现在OK了~

您可能感兴趣的文章:

  • angularjs实现与服务器交互分享
  • AngularJS实现表单验证
  • angularJS中router的使用指南
  • angularJS提交表单(form)
  • angularJS 中input示例分享
张贴在3