html - 当浏览器使用密码管理器自动完成时标签不 float

Question

i have a login form. The password label not floating when the browser using password manager auto completion. Here's the preview. Thanks (input floating label not floating on login form auto completion)and please find the attached image above. (Hello i have a login form. The password label not floating when the browser using password manager auto completion. Here's the preview. Thanks, i really love this project!)

    /*  login form  stylings ------------------------------- */
.group {
  position: relative;
  margin-bottom: 30px;
}

input {
  font-size: 1rem;
  padding: 8px 5px 4px 5px;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #ced4da;
}

input:focus {
  outline: none;
}


/* LABEL ======================================= */
.labe {
  color: #999;
  font-size: 1rem;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

/* active state */
input:focus ~ .labe, input:valid ~ .labe {
  top: -20px;
  font-size: 14px;
  color: #fb9f18;
}

/* BOTTOM BARS ================================= */
.bar {
  position: relative;
  display: block;
  width: 100%;
}

.bar:before, .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #fb9f18;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width: 50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
  from {
    background: #fb9f18;
  }
  to {
    width: 0;
    background: transparent;
  }
}

@-moz-keyframes inputHighlighter {
  from {
    background: #fb9f18;
  }
  to {
    width: 0;
    background: transparent;
  }
}

@keyframes inputHighlighter {
  from {
    background: #fb9f18;
  }
  to {
    width: 0;
    background: transparent;
  }
}

  <form class="text-center">
            <div class="group">
              <input type="text" id="eMail" [(ngModel)]="loginEmail" #eMail="ngModel" name="loginEmail"
                     autocomplete="off" required >
              <span class="bar"></span>
              <label class="labe " for="eMail"><i class="far fa-user mr-2"></i> Email or Username</label>
            </div>
            <div class="group">
              <input [type]="view ? 'text' : 'password'" type="password" id="password" [(ngModel)]="loginPassword"
                     autocomplete="off"
                     #password="ngModel" name="loginpwd" required>
              <span class="bar"></span>
              <label class="labe" for="password"><i class="fa fa-key mr-2"></i> Password</label>
              <a class="hiddenPass" (click)='view = !view'><i class="far"
                                                              [ngClass]="{'fa-eye': view, 'fa-eye-slash':!view}"></i></a>

            </div>
            <div *ngIf="error" class=" alert alert-danger alert-dismissible" style="font-size: .8rem;"><i
              class="fas fa-exclamation-triangle mx-1"></i>{{error}}</div>
            <div class="d-flex justify-content-around">
              <div class="boxes">
                <input type="checkbox" class="asi"  id="box-1">
                <label for="box-1">Remember me</label> 
              </div>
              <div>
                <a class="fpwd" routerLink="/recoverpwd"> Forgot password?</a>
              </div>
            </div>
            <div class=" mt-0 mb-0">
              <button class="login-button" type="submit btn" 
                      (click)="Login(loginEmail,loginPassword)">Sign in
              </button>
              <i *ngIf="loading" class="fas fa-spinner fa-pulse" style="color: #f1bf18; font-size: 20px;"></i>
            </div>
            <p class="awd">Don't have an Account?
              <a class="fpwd" routerLink="/register">Register</a>
            </p>


          </form>

Answer 1

这可能对您的 Chrome 有帮助 ( -webkit-autofill )

input:focus ~ .labe,
input:valid ~ .labe,
input:-webkit-autofill ~ .labe {
  top: -20px;
  font-size: 14px;
  color: #fb9f18;
}

但是，我认为这里的想法是，一旦浏览器自动填充了您的字段，您将触发一个 onChange 事件，这将更新您的模型，然后应用一个类来表明该字段具有值。

我对 Angular 的了解还不够多，无法展示其工作原理的示例代码。