zoukankan      html  css  js  c++  java
  • 关闭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>
    

    使用前后对比


  • 相关阅读:
    OpenCV/python读取,显示,保存图像
    机器学习的基本分类
    Qt Designer常用部件介绍
    C#数据类型列表
    SQL-Base 函数
    SQl 基本函数
    SQL 插入数据
    SQL-Base 用表组织数据
    SQLserver的基本用法
    C#MyBank(自己的看法,转账有点小问题)
  • 原文地址:https://www.cnblogs.com/wancy86/p/autofill.html
Copyright © 2011-2022 走看看