关闭form上chrome的autofill
Chrome的autofill会自动找到form中的type=password的元素,然后把这个元素前面的元素当做是用户名,它不在乎这个元素叫什么名字。这样又是注册又是登录,你会发现它自作聪明的autofill很是烦人,这个是chrom已知的问题,不知道为啥没修复。在stackoverflow上找到了答案:
http://stackoverflow.com/questions/21168367/angularjs-chrome-autocomplete-dilemma#answer-37490925
###解决办法
添加`autocomplete="off"`或者`display=none`都是无效的,下面的方法完美解决
定义下面的指令,然后加到form的最上面,chrome就会认为这个是password。
module.directive("fakeAutocomplete", [
function () {
return {
restrict: "EA",
replace: true,
template: "<div><input/><input type=\"password\"/></div>",
link: function (scope, elem, attrs) {
elem.css({
"overflow": "hidden",
"width": "0px",
"height": "0px"
});
}
}
}
]);
使用
<form name="loginForm" novalidate ng-submit="loginPost()" class="navbar-form navbar-right" ng-hide="login">
<fake-autocomplete></fake-autocomplete>
<div class="form-group">
<input name="user_name" required ng-maxlength="50" type="text" class="form-control" placeholder="手机号或邮箱" ng-model="account.user_name">
<span class="error" ng-show="loginForm.$submitted && loginForm.user_name.$error.required">*用户名不能为空</span>
<span class="error" ng-show="loginForm.$submitted && loginForm.user_name.$error.maxlength">*用户名最大长度50位</span>
</div>
<div class="form-group">
<input name="password" required type="password" ng-minlength="6" ng-maxlength="50" class="form-control" placeholder="密码" ng-model="account.password">
<span class="error" ng-show="loginForm.$submitted && loginForm.password.$error.required">*密码不能为空</span>
<span class="error" ng-show="loginForm.$submitted && loginForm.password.$error.minlength">*密码不能少于6位</span>
<span class="error" ng-show="loginForm.$submitted && loginForm.password.$error.maxlength">*密码最大长度50位</span>
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-lock"></span> 登录</button>
</form>
使用前后对比


关闭form上chrome的autofill的更多相关文章
- c# 模拟表单提交,post form 上传文件、大数据内容
表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipart/form-data,而且要设定一个 boundary 参数,这个参数是由应用程序自行产生,它会用来识别每 ...
- c# 模拟表单提交,post form 上传文件、数据内容
转自:https://www.cnblogs.com/DoNetCShap/p/10696277.html 表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipar ...
- bring to front 必须在右边的form上才生效。
- 把采集到的数据发送到一个Google Docs或者Google Form上 这个网站提供了参考和例子
把采集到的数据发送到一个Google Docs或者Google Form上这个网站提供了参考和例子 http://www.instructables.com/id/Post-to-Google-Doc ...
- 关闭HTML5只能提示(form上新增novalidate)
<form novalidate> <input type="text" required /> <input type="su ...
- Django之中间件&信号&缓存&form上传
中间件 1.中间件是什么? 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用, ...
- Mac上Chrome浏览器跨域解决方案
现在比较新的浏览器在本地调试时AJAX请求,基本都会有跨域问题.相应的解决方案也挺多的,工具也不少.像charles等抓包工具等.不过最简单的就是移除浏览器的同源限制. 我们要做的第一步,就是创建一个 ...
- 通过form上传文件(php)
前段代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
- 关于HTML的FORM上传文件问题
首先,大家可以测试后一段代码 <form id="form1" runat="server"> <input type="file& ...
随机推荐
- LAMP_源码安装全教程
第一步:准备安装软件 httpd-2.4.7.tar.gz, apr-1.4.6.tar.gz, apr-util-1.4.1.tar.gz,mysql-5.5.tar.gz,php-5.4.tar. ...
- ie6,ie7,ie8 css bug兼容解决方法
IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...
- pycharm快捷键、配置virtualenv环境,配置django调试,配置远程调试
pycharm安装和首次使用 http://blog.csdn.net/chenggong2dm/article/details/9365437 快捷键: 找文件.代码.引用相关 1.双击shift ...
- 【BZOJ3943】[Usaco2015 Feb]SuperBull 最小生成树
[BZOJ3943][Usaco2015 Feb]SuperBull Description Bessie and her friends are playing hoofball in the an ...
- requirejs 打包 添加版本号收集资料 待测试
https://www.npmjs.org/package/rjs-optimhttps://www.npmjs.org/package/grunt-requirejs-md5指定js版本号 但不是M ...
- 2分钟 sublime设置自动行尾添加分号并换行:
18:03 2016/4/162分钟 sublime设置自动行尾添加分号并换行:注意:宏文件路径要用反斜杠/,2个\\会提示无法打开宏文件.不需要绝对路径很简单利用宏定义:1.录制宏:由于是录制动作宏 ...
- Javascript 面向对象编程(一):封装
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果 ...
- Activemq mqtt 点对点聊天实现(转载)
我这想到一个点对点聊天的方法,不用没割人都建立一个topic了,思路还是自定义一个分发策略,具体如下: 1. 建立一个topic,所有人都用匹配订阅的方式订阅以该topic为头的topic,例如:所 ...
- The Practical Guide to Empathy Maps: 10-Minute User Personas
That’s where the empathy map comes in. When created correctly, empathy maps serve as the perfect lea ...
- Python之路【第三篇】python基础 之基本数据类型 补充
字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-310 ...