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. SqlServer查询表中各列名称、表中列数

    查询表名为tb_menu的所有列名 select name from syscolumns where id=object_id('tb_menu')     查询表名为tb_menu的所有列名个数 ...

  2. Codeforces Round #344 (Div. 2) A. Interview

    //http://codeforces.com/contest/631/problem/Apackage codeforces344; import java.io.BufferedReader; i ...

  3. Linux系统学习优缺点

    Linux是一套操作系统,按照鸟哥的说法Linux提供了一个完整的操作系统当中最底层的硬件控制与资源管理的完整架构,这个架构是沿袭Unix良好的传统而来的,功能强大而且稳定性卓越.其实Torvalds ...

  4. @WebServlet用注解来实现servlet和url的映射

    package com.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.Se ...

  5. [BZOJ2072][POI2004] MOS过桥

    Description 一个夜晚一些旅行者想要过桥. 他们只有一个火把. 火把的亮光最多允许两个旅行者同时过桥. 没有火把或者多于2个人则不能过桥.每个旅行者过桥都需要特定的时间, 两个旅行者同时过桥 ...

  6. LintCode 77: 最长公共子序列

    public class Solution { /** * @param A, B: Two string. * @return: the length of the longest common s ...

  7. 搭建OpenStack,kvm环境准备

    一.KVM简介 KVM全称是kernel-based virtual machine(基于内核的虚拟机),是一个开源的系统虚拟化模块,基于硬件的完全虚拟化,不过需要硬件支持(如Intel VT技术或者 ...

  8. php清理服务器无效软链接(源码)

    <?php /** * @desc 递归删除当前目录下的无效软连接 * @author mengdj<mengdj@outlook.com> 2014.10.03 1118 */ / ...

  9. 2014 summer training总结篇

    还有一周暑期集训就要结束了,从7月份结束军训到现在一个多月的时间,收获也是有的只不过与之前预想的相比显得十分微薄. 无论是前两天的两场个人赛还是之前的组队赛自己始终是在ranklist的后半部分.一开 ...

  10. [Android] 多重使用Fragment 中的onFragmentInteraction

    新建的一个Fragment,被一个Activity使用,那么这个Activity需要继承一个接口: public class MainActivity extends Activity impleme ...