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的更多相关文章

  1. c# 模拟表单提交,post form 上传文件、大数据内容

    表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipart/form-data,而且要设定一个 boundary 参数,这个参数是由应用程序自行产生,它会用来识别每 ...

  2. c# 模拟表单提交,post form 上传文件、数据内容

    转自:https://www.cnblogs.com/DoNetCShap/p/10696277.html 表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipar ...

  3. bring to front 必须在右边的form上才生效。

  4. 把采集到的数据发送到一个Google Docs或者Google Form上 这个网站提供了参考和例子

    把采集到的数据发送到一个Google Docs或者Google Form上这个网站提供了参考和例子 http://www.instructables.com/id/Post-to-Google-Doc ...

  5. 关闭HTML5只能提示(form上新增novalidate)

    <form novalidate>    <input type="text" required />    <input type="su ...

  6. Django之中间件&信号&缓存&form上传

    中间件 1.中间件是什么? 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用, ...

  7. Mac上Chrome浏览器跨域解决方案

    现在比较新的浏览器在本地调试时AJAX请求,基本都会有跨域问题.相应的解决方案也挺多的,工具也不少.像charles等抓包工具等.不过最简单的就是移除浏览器的同源限制. 我们要做的第一步,就是创建一个 ...

  8. 通过form上传文件(php)

    前段代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; ...

  9. 关于HTML的FORM上传文件问题

    首先,大家可以测试后一段代码 <form id="form1" runat="server"> <input type="file& ...

随机推荐

  1. POJ 2774 Long Long Message ——后缀数组

    [题目分析] 用height数组RMQ的性质去求最长的公共子串. 要求sa[i]和sa[i-1]必须在两个串中,然后取height的MAX. 利用中间的字符来连接两个字符串的思想很巧妙,记得最后还需要 ...

  2. 转:Delphi的类与继承(VB与delphi比较)

    既然已经做出了com程序用delphi来开发的决定,那当然就要对delphi进行一些深入的了解.有人说delphi是一个用控件堆砌起来的工具,和vb没什么两样:也有人说dephi实际上是面向过程的,他 ...

  3. Java Web 项目目录规范

    一.项目结构 这里和其他项目区别不大,我将模板抽离出来,更容易分析和理解: 解释一下:js主要包括extends(引入第三方的js).module(项目模块自己的js).lib(引用包,这里也可以继续 ...

  4. IDE-Sublime【3】-配置Node.js开发环境

    一.下载Nodejs插件,下载地址为https://github.com/tanepiper/SublimeText-Nodejs,解压到当前文件夹,改名为Nodejs 二.打开Sublime Tex ...

  5. 【oracle】union、union all、intersect、minus 的用法及区别

    一.union与union all 首先建两个view create or replace view test_view_1 as as c from dual union as c from dua ...

  6. android事件处理之基于监听

    Android提供了了两种事件处理方式:基于回调和基于监听. 基于监听: 监听涉及事件源,事件,事件监听器.用注册监听器的方法将某个监听器注册到事件源上,就可以对发生在事件源上的时间进行监听. 最简单 ...

  7. Codeforces 721E Road to Home

    题意 输入第一行有4个数,分别为\(L,n,p,t\),分别表示总长度为\(L\)的路,中间有\(n\)个互不相交的区间,现在要用长度为\(p\)的小木棒从左往右铺路(木棒不能被折断,也不能有重叠,且 ...

  8. e.preventDefault() e.stopPropagation()和return false的区别

    e.preventDefault(); //阻止事件的默认行为,比如a标签的转向,但不阻止事件的冒泡传播e.stopPropagation() //阻止事件的冒泡传播,但不阻止其默认行为returne ...

  9. DES加密

    接口等加密字段 import java.security.SecureRandom; import javax.crypto.Cipher;import javax.crypto.SecretKey; ...

  10. 关于AlertDialog.Builder(Context context)中所应传入的context

    错误报告: 10-20 14:34:46.565: E/AndroidRuntime(23098): FATAL EXCEPTION: main10-20 14:34:46.565: E/Androi ...