让angularjs支持浏览器自动填表


Posted in Javascript onNovember 10, 2014

最近有很多前端同学都抱怨说,登陆表单都不能记录自己的账号。这对于用单页面(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记录数据的要求比较简单

让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操作了。

下面是解决办法:

当表单发出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;

};

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

让angularjs支持浏览器自动填表

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

现在OK了~

Javascript 相关文章推荐
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 #Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 #Javascript
浅谈JavaScript 框架分类
Nov 10 #Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 #Javascript
jquery插件推荐 jquery.cookie
Nov 09 #Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 #Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 #Javascript
You might like
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
js获取视频时长代码
2014/04/10 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
Python shutil模块用法实例分析
2019/10/02 Python
mac使用python识别图形验证码功能
2020/01/10 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
铁路安全事故反思
2014/04/26 职场文书
端午节演讲稿
2014/05/23 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
技术股东合作协议书
2014/12/02 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android