• 关闭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>
    

    使用前后对比


  • 相关阅读:
    hibernate 高并发下遇到的大坑
    Spring Cloud微服务架构企业中的应用
    spring cloud学习-hystrix
    点评CAT接入手册
    centOS6.5 修改catalina.sh使用crontab自动切割日志tomcat8
    mariaDB安装报错
    linux安装rap需要的软件
    mariaDB的innodb恢复报错解决
    NFinal学习笔记 02—NFinalBuild
    NFinal 视图—用户控件
  • 原文地址:https://www.cnblogs.com/wancy86/p/autofill.html
Copyright © 2020-2023  润新知