让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 相关文章推荐
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
使用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
4.与数据库的连接
2006/10/09 PHP
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
php除数取整示例
2014/04/24 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
javascript document.images实例
2008/05/27 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
Python中logging.NullHandler 的使用教程
2018/11/29 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
Python学习之time模块的基本使用
2021/01/17 Python
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
广州盈通面试题
2015/12/05 面试题
海南地接欢迎词
2014/01/14 职场文书
校庆筹备方案
2014/03/30 职场文书
路政管理求职信
2014/06/18 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
赢在执行观后感
2015/06/16 职场文书
食堂卫生管理制度
2015/08/04 职场文书
学术会议开幕词
2016/03/03 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js