输入 DOM 元素字体大小小于预期，直到第一次点击页面

Posted 2023-02-22

【中文标题】输入 DOM 元素字体大小小于预期，直到第一次点击页面

【英文标题】：Input DOM element font size is smaller than expected until first click on the page

【发布时间】：2020-01-20 03:00:30

【问题描述】：

我的问题很奇怪，我在互联网上没有找到任何类似的东西。 我的引导输入字体大小在 Angular 2 项目中设置为 1rem。但是在第一次加载站点时重新编译项目后，字体比预期的要小，并且当我单击页面上的任何位置时，字体（仅在输入中）更改为预期的大小。

在单击页面上的任意位置之前，表单如下所示： before 之后就像：after。在这里你可以看出差别不大。

表单组的html代码：

    <div class="form-group" [formGroup]="loginForm">
      <div class="input-group form-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="fas fa-user"></i></span>
        </div>
        <input class="form-control login-input" type="text" formControlName="login" placeholder="Email"
                      (keyup.enter)="login()" #loginName accessibilityRole=form>
        <div *ngIf="loginForm.get('login') as loginField">
          <ng-container *ngIf="loginField.dirty || loginField.touched">
            <div class="text-danger" *ngIf="loginField.hasError('required')">
                          loginFormErrorMessages.loginRequired
            </div>
            <div class="text-danger" *ngIf="loginField.hasError('email')">
                          loginFormErrorMessages.loginEmailError
            </div>
          </ng-container>
        </div>
      </div>
      <div class="input-group form-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="fas fa-key"></i></span>
        </div>
          <input class="form-control login-input" type="password" formControlName="password"
                      placeholder="Password" (keyup.enter)="login()">
            <div *ngIf="loginForm.get('password') as passwordField">
              <ng-container *ngIf="passwordField.dirty || passwordField.touched">
                <div class="text-danger" *ngIf="passwordField.hasError('required')">
                          loginFormErrorMessages.passwordRequired
                </div>
              </ng-container>
            </div>
          </div>
          <div class="form-group">
            <input type="submit" [disabled]="!loginForm.valid" value="Login" (click)="login()"
                      class="btn float-right login_btn">
          </div>
        </div>
    </div>

TS代码是：

import  Component, OnInit, ViewChild, ElementRef, OnDestroy  from '@angular/core';
import  NgbModal, NgbModule  from '@ng-bootstrap/ng-bootstrap';
import  LoginEntryService  from '../login-entry.service';
import  Validators, FormBuilder  from '@angular/forms';
import  Router  from '@angular/router';


@Component(
  selector: 'app-login-entry',
  templateUrl: './login-entry.component.html',
  styleUrls: ['./login-entry.component.scss']
)
export class LoginEntryComponent implements OnInit, OnDestroy 
  tmpEmail: string;
  tmpPassword: string;
  isLoggingInProgress = false;
  @ViewChild('loginName') loginField: ElementRef;

  loginForm = this.fb.group(
    'login': ['', [
      Validators.required,
      Validators.email,
    ]],
    'password': ['', [
      Validators.required
    ]],
  );

  constructor(
    private fb: FormBuilder,
    private loginService: LoginEntryService,
    private modalService: NgbModal,
    private router: Router,
  )  

  ngOnInit() 
    this.loginField.nativeElement.focus();
  

我发现当我尝试在任何点击页面之前更改输入的字体大小时，它没有反应，只有在第一次鼠标点击页面后才会出现更改，然后它才能正常工作。

当我将 type="password 更改为 type="text"

问题消失了，但必须是输入密码。当我在 ngInit 中更改输入值（仅用于测试）时，字体大小正常。

如果我删除 formControlName="password" 和 "login" 也是一样，所以我认为它可能与角度形式有关，但我不知道如何解决这个问题。

【问题讨论】：

你能提供一个工作代码吗？

这是一个工作代码，但它有一些角度属性，你想要 ts 代码吗？

是的。会有帮助的。

我用 ts 代码更新了帖子

这里也一样 - 有人可以帮忙吗？

【参考方案1】：

尝试像这样在 webkit 元素中添加“font-size”：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill::first-line 
 font-size: 1rem;