javascript - Chrome 自动完成锁定输入，就像它们不可点击一样

Question

我在 Chrome 中的自动填充有一个问题和非常奇怪的行为。当我登录然后从应用程序注销时，输入字段(电子邮件、密码)会自动完成，但字段看起来像是被卡住且不可点击。

这个错误不是每次都重现，它发生在 1/10 的情况下。
当字段自动完成时，我在注销时注意到，1 秒后输入中的字体变小，之后如果你点击输入，似乎你没有点击，没有任何 react ，但是如果你输入一些文本(数字不起作用，保持像卡住)输入字段正常。

这是具有奇怪行为的 gif:
https://gifyu.com/image/kTkX

我试图设置autocomplete="off" ，但不工作。

我还匹配了输入字段中的所有 css 类，看看是否有一些覆盖 css，但一切看起来都很好。

<form [formGroup]="loginForm">

<input id="emailHeader" type="text" formControlName="email" placeholder="E-mail">

<input #password type="password" formControlName="password" placeholder="Lozinka">
<input type="submit" (click)="executeLogin()"  value="Prijava">

</form> 

我希望在自动填充后字段不会被卡住。

public loginForm: FormGroup;
  public emailInput: ElementRef;
  public passwordInput: ElementRef;
  @ViewChild('email') set emailContent(content: ElementRef) {
    this.emailInput = content;
  }
  @ViewChild('password') set passwordContent(content: ElementRef) {
    this.passwordInput = content;
  }

  // UI helpers
  public showLoginForm: boolean;
  public showBalance: boolean;
  public player: PlayerModel = new PlayerModel({});
  public balanceInfo: BalanceInfoModel = new BalanceInfoModel({});
  public nxcsBalanceInfo: NXCSBalanceInfoModel = new NXCSBalanceInfoModel({});
  public dialogType = DialogType;
  public customMessageError = '';

  // Store
  private headerState$: Observable<any>;
  private loginState$: Observable<any>;
  private playerState$: Observable<any>;
  private emailInput$: Observable<any>;
  private passwordInput$: Observable<any>;
  private balanceState$: Observable<any>;
  private headerSubscription: Subscription;
  private loginSubscription: Subscription;
  private playerSubscription: Subscription;
  private emailSubscription: Subscription;
  private passwordSubscription: Subscription;
  private balanceSubscription: Subscription;
  // tslint:disable-next-line:no-inferrable-types
  private leftMenu: string = '';
  // tslint:disable-next-line:no-inferrable-types
  private rightMenu: string = '';

  constructor(
    private authService: AuthService,
    private fb: FormBuilder,
    private store: Store<any>,
    private route: Router,
    private localStorageService: LocalStorageService,
    private playerService: PlayerService,
    private notificationService: NotificationService,
    private dialogService: DialogService,
    private helpers: HelpersService,
    private translateCode: TranslateCode,
        private promotionService: PromotionService,
    ) {
    this.loginForm = this.buildLoginForm();
  }

  ngOnInit() {
    this.setupStore();
  }

  ngAfterViewInit() {
    this.formEventsAfterViewInit();
  }

  ngOnDestroy() {
    this.headerSubscription.unsubscribe();
    this.loginSubscription.unsubscribe();
    this.playerSubscription.unsubscribe();
    this.notificationService.closeConnection();
  }

  public executeLogin() {
    if(!this.loginForm.valid) {
      this.customMessageError = this.translateCode.transform("EMPTY_INPUT_MESSAGE");
      return;
    }

    this.authService.login(new LoginModel({...this.loginForm.value, details: this.helpers.sendSessionData()}))
      .subscribe(
        data => {
          this.localStorageService.setUserAfterLogin(data.token);
          this.customMessageError = '';
          this.loginForm.reset();
          this.route.navigate(['/app/casino']);
        },
        error => {
          error.message.includes('Račun je zaključan') ? this.store.dispatch(new PopupNotification(error.message)) : this.customMessageError = error.message
          this.addAfterErrorSubscription();
        }
      );
  }

  public openDialog(dialogType: string): void {
    switch (dialogType) {
      case DialogType.PAYMENT:
         this.openWithdrawalDialog()
        break;
      case DialogType.PAYMENT_DEPOSIT:
          this.checkRegistrationStep();
      break;
      case DialogType.TRANSACTION_HISTORY:
        this.store.dispatch(new OpenDialog({
          type: dialogType,
        }));
      break;
    }
  }

  public openInternalTransactionsDialog(): void {
    this.promotionService.getPromotionsByLocation('NXCS_DEPOSIT')
      .subscribe(
                data => this.dialogService.openDialog(MENU_DIALOGS.INTERNAL_TRANSACTION, { promotions: data }),
        error => this.dialogService.openDialog(MENU_DIALOGS.INTERNAL_TRANSACTION, { promotions: []}),
      );
  }

  public backToRegistrationStep() : void {
    switch (this.player.registrationStep) {
      case 1 :  this.route.navigate(['/auth/registration/step-two']);
                break;
      case 2 : this.route.navigate(['/auth/registration/step-three']);
                break;
      case 3 : this.route.navigate(['/auth/registration/step-four']);
                break;
      case 4 : this.route.navigate(['/auth/registration/step-five']);
                break;
      case 5 : this.route.navigate(['/auth/registration/step-six']);
                break;
      default : this.route.navigate(['/login']);
                break;
    } 
  }

  public toggleMenu(dialog): void {
    if (dialog === 'left') {
      this.leftMenu = this.leftMenu === dialog ? '' : dialog;
    }
    if (dialog === 'right') {
      this.rightMenu = this.rightMenu === dialog ? '' : dialog;
    }
    this.dispatchShadow();
  }

  private openWithdrawalDialog(_data: any = {}): void {
    const playerRole = this.localStorageService.getPlayer()['profileRole'];

    if (playerRole  === 'WITHDRAWAL_DISABLED' && this.player.uploadedAdditionalInfo) {
      this.store.dispatch(new OpenNotification({ type: NotificationType.WITHDRAWAL_DISABLED }));
      return;
    }

    playerRole  === 'WITHDRAWAL_DISABLED' ?
    this.store.dispatch(new OpenNotification({type: NotificationType.MONEY_LAUNDERING})) :
    this.dialogService.openDialog(MENU_DIALOGS.WHITDRAWALS, _data);
  }

  private openProceedToRegistration(): void {
    this.store.dispatch(new OpenNotification ({type: NotificationType.PROCEED_REGISTRATION}))
  }

  private checkRegistrationStep(): void {
    if(this.player.registrationStep < 6) {
      this.openProceedToRegistration();
    } else {
      this.dialogService.openDialog(MENU_DIALOGS.DEPOSITS, {});
    }
  }

  private dispatchShadow(): void {
    if (this.leftMenu !== '') {
      this.store.dispatch(new OpenedLeftMenu());
      this.leftMenu = '';
    }
    if (this.rightMenu !== '') {
      this.store.dispatch(new OpenedRightMenu());
      this.rightMenu = '';
    }
  }

  private buildLoginForm(): FormGroup {
    return this.fb.group({
      email: [
        '', Validators.compose([Validators.required, Validators.min(5)]),
      ],
      password: [
        '', Validators.compose([Validators.required, Validators.min(5)])
      ],
    });
  }

  private loadBalance(): void {
    this.playerService.getPlayerBalance().toPromise()
      .then(data => this.store.dispatch(new SetPlayerBalance({balanceInfo: new BalanceInfoModel(data) })))
      .then(() => {
        if (this.player.externalId) {
          this.playerService.getNXCSPlayerBalance()
            .subscribe(
              data => this.store.dispatch(new SetPlayerNXCSBalance({ nxcsBalanceInfo: new NXCSBalanceInfoModel(data) })),
              error => console.log(error),
            );
        }
      });
  }

  // Store methods
  private setupStore(): void {
    this.headerState$ = this.store.pipe(select('headerStore'));
    this.loginState$ = this.store.pipe(select('loginStore'));
    this.playerState$ = this.store.pipe(select('playerStore'));
    this.balanceState$ = this.store.pipe(select('balanceStore'));
    this.addSubscriptions();
  }

  private formEventsAfterViewInit(): void {
    if (this.emailInput && this.passwordInput) {
      this.emailInput$ = fromEvent(this.emailInput.nativeElement, 'focus');
      this.passwordInput$ = fromEvent(this.passwordInput.nativeElement, 'focus');
      this.addFormEventsSubscriptions();
    }
  }

  private addFormEventsSubscriptions(): void {
      this.emailSubscription = this.emailInput$.subscribe(() => this.triggerEmailFocus());
      this.passwordSubscription = this.passwordInput$.subscribe(() => this.triggerPasswordFocus());
  }

  private triggerEmailFocus(): void {
    this.emailInput.nativeElement.select();
    if (this.emailSubscription) {
      this.emailSubscription.unsubscribe();
    }
  }

  private triggerPasswordFocus(): void {
    this.passwordInput.nativeElement.select();
    if (this.passwordSubscription) {
      this.passwordSubscription.unsubscribe();
    }
  }

  private addSubscriptions(): void {
    this.addHeaderSubscription();
    this.addLoginSubscription();
    this.addPlayerSubscription();
    this.setBalanceSubscription();
  }

  private addHeaderSubscription(): void {
    this.headerSubscription = this.headerState$
    .subscribe(headerState => this.showLoginForm = headerState !== HeaderActionTypes.LoginPage);
  }

  private addLoginSubscription(): void {
    this.loginSubscription = this.loginState$
    .subscribe(loginState => {
      if (loginState) {
        this.loadBalance();
        this.notificationService.connect(localStorage.getItem('token'));
      } else {
        this.notificationService.closeConnection();
      }
      this.showBalance = loginState;
      this.formEventsAfterViewInit();
    });
  }

  private addPlayerSubscription(): void {
    this.playerSubscription = this.playerState$
    .subscribe(playerData => this.player = playerData);
  }

  private addAfterErrorSubscription(): void {
    this.passwordSubscription = this.passwordInput$.subscribe(() => {
      if (this.customMessageError !== '') {
        this.customMessageError = '';
        this.passwordSubscription.unsubscribe();
      }
    });
  }

}

Answer 1

当您允许 Google Chrome 将您的登录凭据保存在任何表单上时，每次自动填充字段时都会出现此问题。它也让我第一次感到不安。
当我第一次遇到它时，我尝试给它一两次，但我逐渐继续前进并接受它作为每个 chrome 用户都必须处理的没什么大不了的错误。
所以总而言之，它与您的代码无关。如果你想unfreeze输入字段，开始在其中输入内容以更改其值。
我希望，这可以帮助您和您的神经接受这种与浏览器相关的行为。